モーダルウィンドウをブラウザ戻るボタンで閉じる　javaScriptのaddEventListener

Quick Edit Pencil
モーダルウインドウを開くコマンドに下記を追加
　モーダルウインドウが開かれるとブラウザに履歴を残す／登録する 
history.pushState(null, null, location.href);

ウチの場合はコレでイケた 
window.addEventListener('popstate', function (e) {
    if (/modalOn/.test(document.body.classList)) {
        alert('ブラウザバックを検知しました。');
        document.body.classList.remove('modalOn');
        let elm = document.querySelector('.modalOpen');
        elm.classList.remove('modalOpen');
        return;
    }
});

あと、モーダルを閉じるコマンドにコレも追加しとく
　履歴が＋１より増えない　たぶん 
window.history.back();

とりあえず、入門的な感じ。かなり奥が深い。

History - Web API | MDN

このブログの人気の投稿

googleのキャシュは廃止されたんだ

https://www.suzukikenichi.com/blog/google-adds-links-to-the-internet-archives-wayback-machine-as-a-cache/ Google検索のキャッシュの代替としてWayback Machineのアーカイブが使われるようになる   投稿日：2024年9月17日   by  Kenichi Suzuki https://www.suzukikenichi.com/blog/cache-search-operator-no-longer-works-in-google-search/ Google、cache:コマンドを廃止。Google検索のキャッシュを完全に見られなくなる   投稿日：2024年9月25日   by  Kenichi Suzuki
Read more »

カルチャーラジオ 日曜カルチャー「人間を考える 思いを伝えることば」

イメージ
3 月 17 日 日曜   午後8時00分 ～   午後9時00分 「人間を考える 思いを伝えることば」（3） 作家…島田雅彦 「思いを伝えることば」第3回は作家の島田雅彦さん。島田さんは過去の人たち、亡くなった人たちを蘇（よみがえ）らせ登場させるのが小説家だと言います。島田さんは既に亡くなった安部公房、中上健次など多くの作家と交流があり、交わした言葉に影響を受けました。今も夢に出てくるといます。現実の世には存在しない、いわば言語が作り出した世界「あの世」や「時間」など、島田さんの目線から「ことば」についてお話し頂きます。 シェアする 3 月 10 日 日曜   午後8時00分 ～   午後9時00分 「人間を考える 思いを伝えることば」（2） コピーライター…梅田悟司 「思いを伝えることば」第2回は広告制作をはじめ製品開発など幅広く活動しているコビーライターの梅田悟司さんです。梅田さんは自分の思っていること考えていることを言葉にして伝えることが大切で、そのためには自分の「内なる言葉」に目を向け高めることが必要であるといいます。今回は、ことばを生かす仕事に携わっている梅田さんにどうすれば思いを伝えることばを生み出すことができるのか、具体例を交えお話しいただきます。 シェアする 3 月 3 日 日曜   午後8時00分 ～   午後9時00分 「人間を考える 思いを伝えることば」（1） ＜全4回＞ 文筆家・エッセイスト…青木奈緒 「人間を考える 思いを伝えることば」。第1回は文筆家、エッセイストの青木奈緒さんです。青木さんの母方の曾祖父は幸田露伴、祖母は幸田文そして母のたまさんも文筆家として知られています。青木さんは、心を表すのが言葉だといいます。今回は曾祖父の幸田露伴、祖母の幸田文、母のたまさんそして青木奈緒さんと代々伝えられてきた言葉や座右の銘について、その言葉が発せられた背景や込められた思いと共にお話しいただきます。
Read more »

書字方向　横書方向変換スクリプト　左書きから右書きへ（コピペ用途）

左横書きを右横書きへ簡易変換します．（コピペ用途） 変換処理はウェブブラウザだけで完了．ネットワーク通信が発生しないので安心．注，複数行の場合は一行になりそう．また，句読点（符号），顔文字の正確な変換は１００％無理っぽ． 変換する文字列（横左方向→） テスト 変換した文字列（←横右方向） 書字方向　横書方向変換スクリプト　HTMLソース JavaScriptコード 変換する値（横左方向→） <form name="form1"> <textarea cols="50" name="textarea1" rows="5" value="1">テスト</textarea> </form> <input onclick="clickBtn1()" type="button" value="変換" /> <input onclick="clickBtn2()" type="button" value="クリア" /> <p>変換した値（←横右方向）</p> <p id="rtl" style="background-color: lightgrey; box-sizing: border-box; color: darkslategrey; line-height: 1.6; overflow: auto; padding: 1rem; text-align: right;"></p> <script> function clickBtn1(){ // 値を取得 const ta1 = document.form1.textarea1.value; const reversed = [...ta1].reduceRight((p, c) => p + c);// 配列に変換し右から左へたたみ込む。 document.getElementById(...
Read more »

memo: ショートカットファイルを直接削除する

ショートカットファイルを直接削除する C:\Users\%USERNAME%\AppData\Roaming\Microsoft\Windows\Start Menu\Programs\Startup （一部カタカナ表示あり） C:\ProgramData\Microsoft\Windows\Start Menu\Programs\StartUp （一部カタカナ表示あり） レジストリから削除する　regedit コンピューター\HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Run コンピューター\HKEY_LOCAL_MACHINE\SOFTWARE\Microsoft\Windows\CurrentVersion\Run コンピューター\HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Microsoft\Windows\CurrentVersion\Run グループポリシー 「コンピューターの構成」→「Windowsの設定」 ＞light＜ ＞dark＜ ＞night-bule＜ ＞vibrant-ink＜ ＞wed＜
Read more »

googleスプレッドシートで名前範囲内のデータが更新された時にタイムスタンプを更新

function onEdit(e) { var sheet = e.source.getActiveSheet(); var range = e.range; var namedRange = e.source.getRangeByName("YourNamedRange"); // 名前付き範囲を指定 var timestampSheet = e.source.getSheetByName("YourTimestampSheet"); // タイムスタンプを表示するシートを指定 var timestampCell = timestampSheet.getRange("A1"); // タイムスタンプを表示するセルを指定 // 名前付き範囲内のセルが編集された場合 if (range.getA1Notation() === namedRange.getA1Notation() || (range.getRow() >= namedRange.getRow() && range.getRow() < namedRange.getLastRow() && range.getColumn() >= namedRange.getColumn() && range.getColumn() < namedRange.getLastColumn())) { if (timestampCell) { var currentDate = new Date(); var formattedDate = Utilities.formatDate(currentDate, Session.getScriptTimeZone(), "yyyy/MM/dd HH:mm"); timestampCell.setValue("Last Update Date: " + formattedDate); // 書式を指定してタイムスタンプを設定 } } } 名前付き範囲が複数ある場合 func...
Read more »

ブックマークレット　DOM　ソース変更

javascript: (function() { /*https://www.atmarkit.co.jp/ait/articles/0808/04/news124.html*/ /*https://into-the-program.com/removechild/*/ /*ヘッダのタグを削除*/ var scripts= document.head.getElementsByTagName('script'); let len = scripts.length; for (var i = 0; i < len; i++) { document.head.removeChild(scripts[0]); } var links= document.head.getElementsByTagName('link'); len = links.length; for (var i = 0; i < len; i++) { document.head.removeChild(links[0]); } var style= document.head.getElementsByTagName('style'); len = style.length; for (var i = 0; i < len; i++) { document.head.removeChild(style[0]); } /*クリップボードに保存*/ var clips = document.title; clips += '; '; clips += document.body.querySelector('p.size').textContent; clips += '; '; clips += document.URL; console.log(clips); /*イメージの集合要素を保存*/ var images= document.body.queryS...
Read more »