カスタムポップアップボックスを実装するためのJavaScriptシングルトンモード

カスタムポップアップボックスを実装するためのJavaScriptシングルトンモード

この記事では、カスタムポップアップボックスを実装するための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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js+html5は半透明マスクレイヤーポップアップボックスの効果を実現します
  • vue.js でのトーストの使用法とトーストポップアップボックスを使用したサンプルコード
  • jsカスタムポップアップボックスプラグインのカプセル化
  • jsポップアップボックスの表示オプションを簡単に実装
  • Vue.jsはポップアップウィンドウを一度だけ実装します
  • jsを使用して、上、下、左、右のポップアップボックスの効果を実現します。
  • layer.js に基づいて配送先住所ポップアップボックスの選択を実装し、対応する住所情報を返します。
  • 閉じられないポップアップボックスを実現するJavaScript
  • 自家製ポップアップボックスを使用した Bootstrap と Angularjs のサンプルコード
  • js はアラート イベントを書き換えます (アラート ポップアップ ボックスのタイトルに URL が表示されないようにします)

<<:  MySQLスレーブのメンテナンスに関する経験の共有

>>:  nginx の場所に複数の Proxy_pass メソッドがある

推薦する

mysql 5.7.17 winx64.zip インストールと設定方法のグラフィックチュートリアル

はじめに: Windows 10 を再インストールし、同時にファイルを整理しました。しかし、MySQ...

Element UI をインストールして vue3.0 でベクター グラフィックスを使用する方法

ここでは、v3 のインストールと使用にのみ焦点を当てます。v2 について学びたい場合は、公式 Web...

Vueコンポーネント間の通信の非常に詳細な要約

目次序文1. Props、$emit一方向データフロー2. $親、$子3. $attrs、$list...

Node.jsで子プロセスを作成する方法

目次導入子プロセスプロセスを非同期的に作成する同期作成プロセス導入Node.js のメイン イベント...

この記事では、Vueのフロントエンドページングとバックエンドページングを実装する方法を説明します。

目次1: フロントエンドの手書きページング(データ量が少ない場合) 2: バックエンドのページング、...

MySql5.7.21 インストールポイント記録メモ

ダウンロードしたバージョンは、Zip 解凍版、Windows システムです。長い間 Windows ...

JavaScript における async と await の使い方とメソッド

JS の async 関数と await キーワード 関数ヘルワールド() { 「こんにちは!美しい...

Swiper.jsプラグインを使用すると、カルーセル画像を非常に簡単に実装できます。

Swiper は、携帯電話やタブレットなどのモバイル端末向けに設計された、純粋な JavaScri...

mysql-8.0.16 winx64 最新インストール チュートリアル (画像とテキスト付き)

最近、データベースについて学び始めました。最初にやったことは、データベースとは何か、データベースとデ...

Tomcat サーバーの応答が遅い場合の解決策

1. 分析的思考1. 機械自身の理由を排除する2. サーバーパフォーマンス分析3. プロジェクト自体...

Node.jsを使用してホットリロードページを実装する方法の詳細な説明

序文少し前に、browser-sync+gulp+gulp-nodemon を組み合わせて、本番環境...

クラウドサーバーパゴダパネルの詳細なインストール手順

目次0x01. パゴダパネルをインストールする0x02. サーバーポートを開く0x03. ブラウザを...

Vue3とElectronを使ったデスクトップアプリケーションの詳しい説明

目次Vue CLIはVueプロジェクトを構築しますVue プロジェクトをマークダウン エディターに変...

Vue は Axios リクエスト フロントエンドのクロスドメイン問題をどのように解決するのか

目次序文1. クロスドメインの問題はなぜ発生するのでしょうか? 2. 解決策クロスオリジンリソース共...

CentOS 7.x に ZSH ターミナルをインストールする方法

1. 基本コンポーネントをインストールするまず、 yumコマンドを実行して、コードpullために必要...