カスタムポップアップボックスを実装するための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 メソッドがある

推薦する

CentOS 7 でゲートウェイを変更して IP を設定する方法の例

Centos7 バージョンをインストールするときに、外部ネットワークへの接続を選択すると、外部ネット...

Vue ライフサイクルの紹介とフック関数の詳細な説明

目次Vueライフサイクルの紹介とフック機能VUEライフサイクルフックVue ライフサイクルの紹介作成...

Mysql 更新マルチテーブル共同更新方法の概要

次に、2 つのテーブルを作成し、一連の SQL 文を実行します。SQL 文の実行後にテーブル内のデー...

MySQLデータベースのマスタースレーブ同期の実際のプロセスの詳細な説明

目次インストール環境の説明MySQLデータベースサービスをインストールするメインライブラリを構成する...

Linuxでファイルを削除してもスペースが解放されない問題の対処方法

問題の背景業務システムのサーバ監視システムからディスク使用率が90%に達したという早期警告通知が来た...

MySQL での置換例の詳細な説明

MySQL での置換例の詳細な説明replace into は insert と似ていますが、rep...

HTML img タグの alt 属性と title 属性の使い方の紹介

ブラウザベンダーが標準を曲げて、ルールに従わないことをすると、問題や少なくとも混乱が生じる可能性があ...

Vue Element-ui テーブルはツリー構造テーブルを実現します

この記事では、ツリー構造テーブルを実現するためのElement-uiテーブルの具体的なコードを参考ま...

nginx のフロントエンドとバックエンドに同じドメイン名を設定する方法

この記事では、主にnginxのフロントエンドとバックエンドに同じドメイン名を設定する方法を紹介し、皆...

Linux リダイレクトの使用方法の詳細な説明

誰でも時々データをコピーして貼り付ける必要があると思います。コピーして貼り付けるためにファイルを開く...

Linux でソフトウェア パッケージのバージョンをアップグレードする方法の詳細な説明

Linux環境で、特定のソフトウェア(パッケージ)がインストールされているかどうかを確認したい。 r...

MySQL 論理バックアップとリカバリ テストの概要

目次1. データベース論理バックアップとはどのようなバックアップですか? 2. よく使われる論理バッ...

リストループスクロールを実現するための HTML+CSS+JavaScript サンプルコード

説明: 指定された時間内に前のノードのコンテンツを置き換えるタイマーを設定します。 1. キーコード...

Windows Server 2016 に Docker をインストールするプロセスと発生した問題

前提条件Windows Server でコンテナーを実行するには、Windows Server (半...

Msyql トランザクション分離について知っておくべきこと

トランザクションとは何ですか?トランザクションは、データベース管理システムの実行プロセスにおける論理...