ブートストラップモーダルダイアログボックスを使用する場合、ページにダイアログボックス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をもっとサポートすることを願っています。