この記事では、カスタムポップアップボックスを実装するためのJavaScriptシングルトンモードの具体的なコードを参考までに紹介します。具体的な内容は次のとおりです。 関数
完全なコードconst ダイアログ = (関数 () { クラスダイアログ{ コンストラクタ(){ this.ele = document.createElement('div') this.ele.className = 'ダイアログ' document.body.appendChild(this.ele) this.callback = null イベントを設定する } setContent ({ テキスト、トピックテキスト、確認テキスト、キャンセルテキスト } = オプション) { this.ele.innerHTML = null 定数 top = document.createElement('div') top.className = 'top' 定数トピック = document.createElement('span') topic.className = 'トピック' topic.innerHTML = トピックテキスト 定数close = document.createElement('span') close.className = 'close' close.innerHTML = '×' top.appendChild(トピック) top.appendChild(閉じる) const 中間 = document.createElement('div') middle.className = 'middle' 定数コンテンツ = document.createElement('div') content.className = 'コンテンツ' content.innerHTML = テキスト middle.appendChild(コンテンツ) 定数ボトム = document.createElement('div') bottom.className = 'bottom' const 確認 = document.createElement('button') confirm.className = '確認' 確認.innerHTML = 確認テキスト const キャンセル = document.createElement('button') cancel.className = 'キャンセル' キャンセル.innerHTML = キャンセルテキスト bottom.appendChild(確認) bottom.appendChild(キャンセル) 定数 wrap = document.createElement('div') this.ele.appendChild(トップ) this.ele.appendChild(中間) this.ele.appendChild(下) this.ele.style.display = 'ブロック' } イベントを設定する(){ this.ele.addEventListener('クリック', e => { e = e || ウィンドウイベント 定数ターゲット = e.target || e.srcElement (target.className === 'close')の場合{ this.ele.style.display = 'なし' コンソールログ('閉じる') } (target.className === '確認')の場合{ this.ele.style.display = 'なし' this.callback(true) } target.className === 'キャンセル'の場合{ this.ele.style.display = 'なし' this.callback(false) } }) } } インスタンス = null とする 関数を返す(オプション、cb){ if (!instance) インスタンス = new Dialog() インスタンス.setContent(オプション) インスタンス.コールバック = cb || 関数 () {} インスタンスを返す } })() const ダイアログ = 新しいダイアログ({ テキスト: 'プロンプトテキスト'、 topicText: 'タイトル', confirmText: '確認', cancelText: 'キャンセル' }, res => { console.log(res) }) レンダリング 以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
>>: nginx の場所に複数の Proxy_pass メソッドがある
Centos7 バージョンをインストールするときに、外部ネットワークへの接続を選択すると、外部ネット...
目次Vueライフサイクルの紹介とフック機能VUEライフサイクルフックVue ライフサイクルの紹介作成...
次に、2 つのテーブルを作成し、一連の SQL 文を実行します。SQL 文の実行後にテーブル内のデー...
目次インストール環境の説明MySQLデータベースサービスをインストールするメインライブラリを構成する...
問題の背景業務システムのサーバ監視システムからディスク使用率が90%に達したという早期警告通知が来た...
MySQL での置換例の詳細な説明replace into は insert と似ていますが、rep...
ブラウザベンダーが標準を曲げて、ルールに従わないことをすると、問題や少なくとも混乱が生じる可能性があ...
この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...
この記事では、主にnginxのフロントエンドとバックエンドに同じドメイン名を設定する方法を紹介し、皆...
誰でも時々データをコピーして貼り付ける必要があると思います。コピーして貼り付けるためにファイルを開く...
Linux環境で、特定のソフトウェア(パッケージ)がインストールされているかどうかを確認したい。 r...
目次1. データベース論理バックアップとはどのようなバックアップですか? 2. よく使われる論理バッ...
説明: 指定された時間内に前のノードのコンテンツを置き換えるタイマーを設定します。 1. キーコード...
前提条件Windows Server でコンテナーを実行するには、Windows Server (半...
トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...