ブートストラップモーダルマスクポップアップレイヤー (完全版)-jsチュートリアル-php.cn

ブートストラップモーダルマスクポップアップレイヤー (完全版)

高洛峰

リリース： 2016-12-24 10:49:26

オリジナル

3154 人が閲覧しました

Bootstrap を模倣して、Bootstrap モーダルは外層に固定を追加し、コンテンツに適応型の上部中心メソッドを使用します。今日私が共有する記事はまさにそれを示しています。

html 構造

コンテンツ領域を中央に配置する必要があることを考慮すると、背景を配置して表示するために少なくとも 1 つの div が必要であり、コンテンツ領域をヘッダーに分割する必要があります。本文とフッター。

<div class="rs-dialog" id="myModal1">
<div class="rs-dialog-box">
<a class="close" href="#">×</a>
<div class="rs-dialog-header">
<h3>标题</h3>
</div>
<div class="rs-dialog-body">
<p>内容</p>
</div>
<div class="rs-dialog-footer">
<input type="button" class="close" value="Close" style="float:right">
</div>
</div>
</div>

ログイン後にコピー

スタイルを追加

背景と不透明度で背景を透明にします。rgbaも選択できますが、IE8以下のブラウザではサポートされていません。固定位置の div がウィンドウ全体を覆うようにするには、その top、right、left、bottom 属性を 0 に設定します。

コンテンツ領域が長すぎる場合は、本文 (または HTML) のオーバーフロー属性を非表示に設定し、ブラウザの実際のスクロールバーが表示されないようにして、ポップの最も外側の div を設定することで、ブラウザの垂直スクロールバーをシミュレートします。 up window overflow-y:auto は、この div のスクロールバーを使用してブラウザのスクロールバーをシミュレートします。

ポップアップウィンドウの開閉時のスクロール効果はcss3トランジションを使用して実装されています。

.dialog-open{
overflow-y:hidden !important;
}
.rs-overlay{
background:#000;
opacity:.5;
filter: alpha(opacity=50);
position: fixed;
z-index: 1000;
top:0;
bottom:0;
left:0;
right:0;
display: none;
}
.rs-dialog{
display: none;
opacity: 0;
overflow: hidden;
position: fixed;
top:0;
bottom:0;
left:0;
right:0;
z-index: 1040;
-webkit-overflow-scrolling: touch;
outline: 0;
/*background: rgba(0,0,0,.5);*/
-webkit-transition: opacity .15s linear;
-o-transition: opacity .15s linear;
transition: opacity .15s linear;
}
.dialog-open .rs-dialog{
overflow-x:hidden;
overflow-y:auto;
}
.rs-dialog.in{
opacity: 1;
}
.rs-dialog .rs-dialog-box {
-webkit-transform: translate(0, -25%);
-ms-transform: translate(0, -25%);
-o-transform: translate(0, -25%);
transform: translate(0, -25%);
-webkit-transition: -webkit-transform 0.3s ease-out;
-o-transition: -o-transform 0.3s ease-out;
transition: transform 0.3s ease-out;
}
.rs-dialog.in .rs-dialog-box {
-webkit-transform: translate(0, 0);
-ms-transform: translate(0, 0);
-o-transform: translate(0, 0);
transform: translate(0, 0);
}
.rs-dialog .rs-dialog-box{
position: relative;
margin:30px auto;
width: 600px;
background-color: #ffffff;
border-radius:10px;
border: 1px solid #999999;
border: 1px solid rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
box-shadow: 0 3px 9px rgba(0, 0, 0, 0.5);
}
.logged-in .rs-dialog .rs-dialog-box{
margin-top:60px;
}
.rs-dialog-box a.close{
position: absolute;
top: -12px;
right: -12px;
width: 25px;
height: 25px;
padding: 0;
line-height: 25px;
font-size:20px;
font-family:Arial,sans-serif;
font-weight:bold;
text-decoration:none;
text-align:center;
text-shadow: 0 1px 0 #ffffff;
color: #fff;
background-color:#8b8b8b;
border:2px solid #fff;
border-radius: 25px;
box-shadow:0 0 3px 1px #999;
outline: none;
}
.rs-dialog-box a.close:hover{
background-color:#444;
}
.rs-dialog-header{
padding: 20px;
border-bottom: 1px solid #e5e5e5;
}
.rs-dialog-header h3{
font-size: 18px;
}
.rs-dialog-body{
padding: 20px;
line-height: 1.4
}
.rs-dialog-body p{
margin-bottom:10px;
}
.rs-dialog-footer{
padding: 20px;
border-top:1px solid #e5e5e5;
overflow: hidden;
}
@media (max-width: 767px) {
.rs-dialog .rs-dialog-box {
width: auto;
margin: 30px 20px;
}
}

ログイン後にコピー

制御スクリプトの追加

それらのほとんどはCSSで実装されているため、スクリプトは単純なaddClassとremoveClassを通じてスイッチを制御できます。

ポップアップウィンドウの外側をクリックしてウィンドウを閉じる機能を追加することもできます。

jQuery(document).ready(function($){
$(&#39;body&#39;).append(&#39;<div class="rs-overlay" />&#39;);
$("a[rel=&#39;rs-dialog&#39;]").each(function(){
var trigger = $(this);
var rs_dialog = $(&#39;#&#39; + trigger.data(&#39;target&#39;));
var rs_box = rs_dialog.find(&#39;.rs-dialog-box&#39;);
var rs_close = rs_dialog.find(&#39;.close&#39;);
var rs_overlay = $(&#39;.rs-overlay&#39;);
if( !rs_dialog.length ) return true;
// Open dialog
trigger.click(function(){
//Get the scrollbar width and avoid content being pushed
var w1 = $(window).width();
$(&#39;html&#39;).addClass(&#39;dialog-open&#39;);
var w2 = $(window).width();
c = w2-w1 + parseFloat($(&#39;body&#39;).css(&#39;padding-right&#39;));
if( c > 0 ) $(&#39;body&#39;).css(&#39;padding-right&#39;, c + &#39;px&#39; );
rs_overlay.fadeIn(&#39;fast&#39;);
rs_dialog.show( &#39;fast&#39;, function(){
rs_dialog.addClass(&#39;in&#39;);
});
return false;
});
// Close dialog when clicking on the close button
rs_close.click(function(e){
rs_dialog.removeClass(&#39;in&#39;).delay(150).queue(function(){
rs_dialog.hide().dequeue();
rs_overlay.fadeOut(&#39;slow&#39;);
$(&#39;html&#39;).removeClass(&#39;dialog-open&#39;);
$(&#39;body&#39;).css(&#39;padding-right&#39;, &#39;&#39;);
});
return false;
});
// Close dialog when clicking outside the dialog
rs_dialog.click(function(e){
rs_close.trigger(&#39;click&#39;);
});
rs_box.click(function(e){
e.stopPropagation();
});
});
});

ログイン後にコピー

Webページのコンテンツが移動しないようにする

ポップアップウィンドウを開くときに本文にoverflow:hidden属性を追加すると、スクロールバーが表示されなくなります。このとき、Webページのコンテンツは右側に移動します。ポップアップウィンドウが開き、スクロールバーが再び表示されると、元に戻りますが、視覚効果は不親切です。スクロールバーがある場合のその幅がわかっている場合は、本文に padding-right 属性を追加することで、この安っぽい効果を相殺できます。

ポップアップウィンドウをトリガーする

最後に、上記のスクリプトによると、ポップアップウィンドウをトリガーするリンクは次のとおりです

<a href="#" rel="rs-dialog" data-target="myModal">Launch Demo Modal</a>

ログイン後にコピー

rel="rs-dialog" は、これがポップをトリガーするリンクであることを意味します-up window

data-target="myModal" は、ID myModal の HTML ポップアップウィンドウを開くことを意味します。

Bootstrap モーダルマスクポップアップレイヤー (完全版) に関連するその他の記事については、PHP 中国語 Web サイトに注目してください。

ブートストラップ モーダル マスク ポップアップ レイヤー (完全版)

ブートストラップモーダルマスクポップアップレイヤー (完全版)