こんにちは ボリス・チェレパノフと申します。ワードプレスとビトリクスでウェブサイトを開発しています。 ここでプロジェクトに取り組みました。 制限の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 () {
したがって、コンストラクターで以下を登録する必要があります。
var XMC = function (object) { this.delegateClick(); }
ちなみに、かつて、
javascriptを
学習する記事がこれに対処するのに役立ちました。 それをよく理解しておくと便利です。
フォーム用のAJAX
私の「ケース」では、ajaxを使用してフォームをロードする必要がありました（このタスクはプロセスに現れました）。 最初のアプローチのおかげで、かなりの時間を節約できました。 プロトタイプを拡張しました。
XMC.prototype.ajax = function () { var mf = this; var data = new Object();
CMS Wordpressにはこのようなリクエストコードがありました。
まとめ
その結果、オブジェクトアプローチのおかげで、ポップアップだけでなく、フォームを受信して送信するための2つのajax、ブラウザー固有の翻訳、Cookieの読み取り、アニメーションの読み込みを行うWebアプリケーションを作成することができました。 これにより、ajaxによって「到着」した形式のデータを翻訳または操作するために、さまざまなセレクターで新しい要素を探す必要がなくなりました。
私の記事がお役に立てば幸いです。 頑張って