ブートストラップモーダルダイアログボックスを使用する場合、ページにダイアログボックスHTMLを記述する必要があります。ページにダイアログボックスが必要な場所がたくさんある場合、それはあなたが複数の場所を書く必要があることを意味します。私はブートストラップモーダルダイアログボックスメソッドに慣れていないため、シンプルなカプセル化と拡張を行い、カスタムタイトル、幅と高さを追加し、幅と高さに応じて中央に表示しました。
デフォルトプロパティ：
ID：「モーダル」、//ポップアップID
タイトル：「ダイアログ」、//ポップアップタイトル
幅： "600"、//ポップアップウィンドウ幅、％は当面がサポートされていません
高さ： "500"、//人気のある窓の高さは、％をサポートしていません
背景：true、//閉塞が表示されるかどうか、それはネイティブブートストラップモーダルボックスと同じです
キーボード：true、// ESCキーを終了するかどうか、それはネイティブブートストラップモーダルボックスと同じです
リモート： ""、//ネイティブブートストラップモーダルボックスのように、リモートURLをロードします
OpenEvent：null、//ポップアップウィンドウが開いた後のコールバック関数
CloseEvent：null、//ポップアップウィンドウが閉じた後のコールバック関数
Okevent：null // [OK]ボタンをクリックしてコールバック関数
使い方：
1。HTMLデータ - *属性を介して定義します
コードを次のようにコピーします。
2。JSを介して初期化します
$（ "。mzdialog"）。mzdialog（）;
不適切な場所とバグ、ここに学習のための単なる参照があり、あなたはそれらを自分で変更して改善することができます
1. Bootstrap-Mzdialogプラグインには、現時点では2つのボタンしかありません。キャンセルして確認すると、カスタムボタンはまだサポートされていません。ソースコードを変更して、この関数を追加できます。
2。HTMLデータ - *メソッドのみを使用して定義できます。 JS初期化中に構成パラメーターをサポートしません。ソースコードを変更して、この関数を自分で拡張できます。
3。体重と高さは使用しないでください。
4.ここのコールバック関数は、Okevent： "ok（）"などの文字列形式である必要があることに注意してください。ここで、OK関数自体によって定義される関数は、（）を忘れないでください。
JSソースコード：
/*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------背景：true、//オクルージョンが表示されているかどうか、ネイティブブートストラップモーダルボックスキーボードと同じであるかどうか：true、// escキーが出口に有効になっているかどうか、ネイティブブートストラップモーダルボックスリモート： ""、//リモートURLをロードします。 Okevent：null // [OK]ボタンをクリックしてコールバック関数}; //ダイナミック作成ウィンドウvar recutedialog = {init：function（opts）{var _ self = this; //ダイナミックインサートウィンドウvar d = _ self.dhtml（opts）; $（ "body"）。append（d）; var modal = $（ "＃"+opts.id）; //ウィンドウModal.modal（opts）を初期化します。 //ウィンドウサイズの位置var h = modal.height（） - modal.find（ "。modal-header"）。 Modal.css（{'margin-left'：opts.width/2*-1、 'margin-top'：opts.height/2*-1、 'top'： '50％'}）。モーダル// window.modal（ 'show'）//ウィンドウを隠した後にウィンドウを削除するhtml .on（ 'hidden'、function（）{modal.remove（）; $（ "。モーダルバックドロップ"）。 if（opts.openevent）{eval（opts.openevent）; }、dhtml：function（o）{return '<div id = "'+o.id+'" roleg = "aria-labelledby =" mymodallabel "aria-hidden =" true "> <div> <button =" button "data-dismiss =" modal "aria-hidden =" "真" id = "mymodallabel"> '+o.title+' </h3> </div> <div> <p> loading ... </p> </div> <div> <button data-dismiss = "modal" aria-hidden = "true"> cancel </button> <ボタン> </button> </button> </div> </div> </div> }}; return this.each（function（）{$（this）.click（function（）{var opts = $ .extend（{}、{id：$（this）.attr（ "data-id"）、title：$（this）.attr（ "data-mtitle"）、width：$：$（this）.attr（ "data-width"）、$（ "）、$（"）。バックドロップ：$（this）.attr（ "data-backdrop"）、keyboard：$（this）.attr（ "data-keyboard"）、remote：$（this）.attr（ "data-remote"）、openevent：$（this）.attr（ "data-openevent"）、closeevent：$（this）.attr（this）。 okevent：$（ "data-okevent"）}）; }; }）（jQuery）;上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。