Clever Geek Handbook

SimpleModal-シンプルなモーダルウィンドウ

SimpleModalプラグインの概要、グリッチ、グリッチの除去、画面の中央への配置、その他の設備。 一般に、ブログに記事「SimpleModal-シンプルモーダルウィンドウ」を公​​開しましたが、habrayuzerがそれについて知るのは面白いと思いました。 また、新しい記事「jQuery blockUIのモーダルウィンドウ」をご覧になることをお勧めします。 再生するライトボックスと同じではありません。



使い始める



プラグインデータ：



このケースは次のようになります。







プラグインが機能するには、接続する必要があります。

<script src = "jquery.simplemodal.js" type = "text / javascript" > </ script>



また、オーバーレイ（灰色の領域）、コンテナ（ウィンドウ自体）、および閉じるボタンのスタイルも指定します。



#modalOverlay {

background-color:#000; /* */

cursor:wait; /* */

filter: alpha(opacity=80); /* */

height: 100%;

}



#modalContainer {

height:auto; /* */

width:300px;

left:50%; /* margin-left, */

top:50%; /* , margin-top, */

margin-left:-150px;

/* margin-top: -70px; */

background-color:#fff;

border:3px solid #ccc;

padding: 10px;

}

a.modalCloseImg {

background:url(x.png) no-repeat;

width:25px; /* , . */

height:29px;

display:inline;

z-index:3200;

position:absolute;

top:0px;

right:0px;

cursor:pointer;

}









残念ながら、プラグインにはいくつかの不具合が潜んでいます。 たとえば、オペラでは、ページのコンテンツがページ自体より短い場合、ウィンドウを閉じると、灰色の領域が下に残ります。 IEでは、ペイントがまったく行われない場合があります。



これはOperaでの見た目です



ただし、これは非常に簡単に解決されます。 ページにスタイルを追加する必要があります。

#helper {

position: absolute;

top: 0px;

left: 0px;

width: 100%;

height: 100%;

z-index: -10;

}







そして、挿入するページのどこでも：

< div id ="helper" ></ div



>


これにより、モーダルウィンドウを閉じるときにブラウザがドキュメントを再描画するようになります。



便利なアラートを作成する



最初に、ページの中央にウィンドウを取得します。 この例では、幅を300ピクセルに制限しましたが、高さはさまざまです。 CSSプロパティtop：50％は実際にウィンドウをページの中央まで下げますが、モーダルウィンドウ自体は中央のすぐ下になります。 高さをピクセル単位、たとえば150pxで指定した場合、-75pxのmargin-topを使用してウィンドウを中央より上に上げることができます。 しかし、ウィンドウはゴムであり、このために別のプラグインを使用します：Dimensions。 プラグインデータ：



このプラグインを使用すると、ウィンドウの高さをそれぞれ測定し、高さの半分を計算して、Webページの中心からこのピクセル数だけウィンドウを上げることができます。

< script type ="text/javascript" src ="jquery.dimensions.js" ></ script >





接続済み。 次に、Simplemodalプラグイン（jquery.simplemodal.js）のエディターファイルを開きます。はい、はい、プラグインを修正します。 バージョンが一致する場合、294行目はオープン関数になります。 this.bindEvents（）の直後、最後に行きます。 そして、閉じ中括弧に入れます

< pre name ="code" class ="js" >

$('#modalContainer').css('margin-top',-$('#modalContainer').outerHeight()/2-50);

</ pre >





具体的には、高さからさらに50ピクセルを削除しました。これにより、利便性が向上したようです。 しかし、あなたは実験することができます。 残りはほとんどありません。 ページの最後に追加します。

< div id ="message" style ="display: none; text-align: center;" >

< div id ="messageText" > </ div >< br />< br />

< input type ='button' value ='Ok' class ='modalClose' style ='height: 30px; width: 60px;' />

</ div >





ボタンにはclass = 'modalClose'があることに注意してください。 あなたは歌姫のこのクラスで他のオブジェクトを作成することができます-それをクリックするとウィンドウが閉じます。 すべての準備が完了しました。 それを使用するだけです。 たとえば、次のように：

< script type ="text/javascript" >

$( document ).ready( function () {

$( '#messageText' ).html( ' !' );

$( '#message' ).modal();

});

</ script >





そして、ページがロードされると、



!



やった、やった。



デモ： 参照



More articles:


All Articles