この記事では、カスタムポップアップボックスを実装するための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 メソッドがある
はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...
ここでは、v3 のインストールと使用にのみ焦点を当てます。v2 について学びたい場合は、公式 Web...
目次序文1. Props、$emit一方向データフロー2. $親、$子3. $attrs、$list...
目次導入子プロセスプロセスを非同期的に作成する同期作成プロセス導入Node.js のメイン イベント...
目次1: フロントエンドの手書きページング(データ量が少ない場合) 2: バックエンドのページング、...
ダウンロードしたバージョンは、Zip 解凍版、Windows システムです。長い間 Windows ...
JS の async 関数と await キーワード 関数ヘルワールド() { 「こんにちは!美しい...
Swiper は、携帯電話やタブレットなどのモバイル端末向けに設計された、純粋な JavaScri...
最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...
1. 分析的思考1. 機械自身の理由を排除する2. サーバーパフォーマンス分析3. プロジェクト自体...
序文少し前に、browser-sync+gulp+gulp-nodemon を組み合わせて、本番環境...
目次0x01. パゴダパネルをインストールする0x02. サーバーポートを開く0x03. ブラウザを...
目次Vue CLIはVueプロジェクトを構築しますVue プロジェクトをマークダウン エディターに変...
目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...
1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...