待っていたモーダルウィンドウ。 または、純粋なJSのさまざまなボタンからポップアップを呼び出す方法

こんにちは ボリス・チェレパノフと申します。ワードプレスとビトリクスでウェブサイトを開発しています。 ここでプロジェクトに取り組みました。 制限の1つはjqueryを使用しないことでしたが、異なるボタンから同じモーダルウィンドウを呼び出す必要がありました。 実際、これは非常に簡単なタスクですが、最初のクリックで作成されるモーダルウィンドウを作成し、その状態を保存し、呼び出し用のコンストラクターを作成することなどに決めました。 そして最後に、私はそれを後悔しませんでした。 理由は後で説明します。 このモーダルウィンドウを、常に使用できるターンキーソリューションに「ラップ」しました。

設置

このような「モーダル」のインストールは簡単です。 jsファイルをダウンロードして接続します。 イベントやライブラリに依存しないため、必要な場所に接続できます。 githubへのリンクはこちら

初期化

呼び出す必要があるページで、jsで記述します。

new XMC({ bodyID: 'body', backgroundLayerID: 'wrapper', selector: 'data-type', selectorValue: 'openModalForm', btnId: 'mfClose', content: '', classListBg: ['zuzu', 'zaza'], classListBody: ['zuzu', 'zaza2'], classListBtn: ['zuzu', 'zaza3'], styleBg: { top: '0', left:'0', right: '0', bottom: '0', position: 'fixed', background: '#00000090', justifyContent: 'center', alignItems: 'center', zIndex: '6' }, styleBody: { minWidth: '200px', minHeight: '200px', background: '#ffffff', justifyContent: 'center', alignItems: 'center', }, btnStyle: { width: '40px', height: "40px", background: '#ffffff', display: 'flex', justifyContent: 'center', alignItems: 'center', position: 'absolute', top: '5%', right: '5%', cursor: 'pointer' } });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

オブジェクト内のアイテムの詳細

6つの必須ポイントがあります。

• bodyIDは、モーダルウィンドウのコンテンツを含むブロックの識別子です
• backgroundLayerID-レイヤーIDを暗くする
• selector-モーダルウィンドウを引き起こすすべてのボタンにあるhtml属性
• selectorValue-セレクター値
• bntID-モーダルウィンドウを閉じるボタンのID
• 内容-モーダルウィンドウ内のテキストまたはHTML

オプションですが、非常に重要な点：

• classListBg、classListBody、classListBtn-調光レイヤー、メインウィンドウ、閉じるボタンのクラス配列
• styleBg、styleBody、btnStyle-調光レイヤー、メインウィンドウ、閉じるボタンのスタイルを持つオブジェクト

モーダルウィンドウ自体について少し

このモーダルウィンドウが解決する主なタスクは、いくつかのボタンからの呼び出しであることは既に述べました。 いくつかのボタンをクリックしてjsを呼び出すことは、委任の典型的な例であり、XMCでは（モーダルウィンドウと呼んでいたように）次のように実装されています。

 XMC.prototype.delegateClick = function () { var mf = this; window.addEventListener('click', function () { //     ,          if(event.target.hasAttribute(mf.selector) && event.target.getAttribute(mf.selector) === mf.selectorValue ){ mf.show(); //    mf.delegateClose(); //     } }, mf, false); };
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

したがって、コンストラクターで以下を登録する必要があります。

 var XMC = function (object) { /*   */ this.delegateClick(); }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ちなみに、かつて、 javascriptを学習する記事がこれに対処するのに役立ちました。 それをよく理解しておくと便利です。

フォーム用のAJAX

私の「ケース」では、ajaxを使用してフォームをロードする必要がありました（このタスクはプロセスに現れました）。 最初のアプローチのおかげで、かなりの時間を節約できました。 プロトタイプを拡張しました。

 XMC.prototype.ajax = function () { var mf = this; var data = new Object(); //  ,    ,    data = JSON.stringify(data); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function () { if(this.readyState == 4 && this.status == 200){ mf.body.innerHTML = this.responseText; mf.sendClickDelegate(mf.form); mf.i18n(); } }; xhttp.open('POST', localizationPreloader.adminUrl + "?action=my_action", true); xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xhttp.send("data="+data); return this; }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

CMS Wordpressにはこのようなリクエストコードがありました。

まとめ

その結果、オブジェクトアプローチのおかげで、ポップアップだけでなく、フォームを受信して​​送信するための2つのajax、ブラウザー固有の翻訳、Cookieの読み取り、アニメーションの読み込みを行うWebアプリケーションを作成することができました。 これにより、ajaxによって「到着」した形式のデータを翻訳または操作するために、さまざまなセレクターで新しい要素を探す必要がなくなりました。



私の記事がお役に立てば幸いです。 頑張って