Bootstrap-Modalmasken-Popup-Ebene (Vollversion)

Bootstrap imitiert modal, fügt der äußeren Ebene feste Elemente hinzu und verwendet dann die adaptive Top-Centered-Methode für den Inhalt. Der Artikel, den ich heute teile, tut genau das.

HTML-Struktur

Da der Inhaltsbereich zentriert sein muss, muss mindestens ein Div vorhanden sein, um den Hintergrund zu positionieren und anzuzeigen, und dann ein Div verwenden, um den Inhalt zu zentrieren Der Bereich möchte in Kopf-, Haupt- und Fußzeile unterteilt werden.

<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>

Stil hinzufügen

Transparenter Hintergrund wird mit Hintergrund und Deckkraft erreicht. Sie können auch RGBA wählen, aber Browser IE8 und niedriger unterstützen dies nicht. Damit ein Div mit fester Position das gesamte Fenster abdeckt, können Sie seine oberen, rechten, linken und unteren Attribute auf 0 setzen.

Wenn der Inhaltsbereich zu lang ist, simulieren Sie die vertikale Bildlaufleiste des Browsers, indem Sie das Überlaufattribut des Textkörpers (oder HTML) auf ausgeblendet setzen, die Anzeige der echten Bildlaufleiste des Browsers deaktivieren und dann das Pop- up window das äußerste Das Div der Ebene ist auf overflow-y:auto gesetzt, und die Bildlaufleiste dieses Div wird verwendet, um die Bildlaufleiste des Browsers zu simulieren.

Der Scrolleffekt beim Öffnen oder Schließen des Popup-Fensters wird mithilfe des CSS3-Übergangs implementiert.

.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;
}
}

Steuerskript hinzufügen

Die meisten davon sind in CSS implementiert, sodass das Skript den Schalter durch einfaches addClass und removeClass steuern kann.

Sie können auch die Funktion hinzufügen, durch Klicken außerhalb des Popup-Fensters das Fenster zu schließen.

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();
});
});
});

Verhindern Sie, dass sich der Inhalt einer Webseite verschiebt.

Fügen Sie beim Öffnen eines Popup-Fensters das Attribut „overflow:hidden“ hinzu, wodurch die Bildlaufleiste ausgeblendet wird Wenn sich das Popup-Fenster öffnet und die Bildlaufleiste erneut angezeigt wird, wird sie wiederhergestellt und der visuelle Effekt ist nicht benutzerfreundlich. Wenn Sie die Breite der Bildlaufleiste kennen, sofern eine vorhanden ist, kann das Hinzufügen des padding-right-Attributs zum Textkörper diesen billigen Effekt ausgleichen.

Popup-Fenster auslösen

Abschließend lautet der Link zum Auslösen des Popup-Fensters gemäß dem obigen Skript wie folgt

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

rel=" „rs-dialog“ bedeutet, dass es sich um einen Popup-Fenster-Trigger handelt. Der Link

data-target="myModal" bedeutet, das Popup-Fenster mit der HTML-ID myModal zu öffnen.

Weitere Artikel zur Popup-Ebene der Bootstrap-Modalmaske (Vollversion) finden Sie auf der chinesischen PHP-Website!