Couche contextuelle de masque modal Bootstrap (version complète)

Imitant Bootstrap, le modal Bootstrap ajoute du fixe à la couche externe, puis utilise la méthode adaptative centrée en haut pour le contenu. L’article que je partage aujourd’hui fait exactement cela.

Structure HTML

Étant donné que la zone de contenu doit être centrée, il doit y avoir au moins un div pour positionner et afficher l'arrière-plan, puis utiliser un div pour centrer le contenu. la zone doit être divisée en en-tête, corps et pied de page.

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

Ajouter un style

Un arrière-plan transparent est obtenu avec l'arrière-plan et l'opacité. Vous pouvez également choisir rgba, mais les navigateurs IE8 et inférieurs ne le prennent pas en charge. Afin qu'un div avec une position fixe couvre toute la fenêtre, vous pouvez définir ses attributs top, right, left et bottom sur 0.

Lorsque la zone de contenu est trop longue, simulez la barre de défilement verticale du navigateur en définissant l'attribut de débordement du corps (ou HTML) sur caché, en désactivant l'apparition de la véritable barre de défilement du navigateur, puis en donnant la fenêtre contextuelle. up window la plus externe Le div du calque est défini sur overflow-y:auto, et la barre de défilement de ce div est utilisée pour simuler la barre de défilement du navigateur.

L'effet de défilement lorsque la fenêtre pop-up est ouverte ou fermée est implémenté à l'aide de la transition 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;
}
}

Ajouter un script de contrôle

La plupart d'entre eux sont implémentés en CSS, de sorte que le script peut contrôler le commutateur via de simples addClass et RemoveClass.

Vous pouvez également ajouter la fonction permettant de cliquer en dehors de la fenêtre contextuelle pour fermer la fenêtre.

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

Empêcher le déplacement du contenu de la page Web

Ajoutez l'attribut overflow:hidden au corps lors de l'ouverture d'une fenêtre contextuelle, ce qui fera disparaître la barre de défilement. la page Web pour se déplacer vers la droite Lorsque la fenêtre contextuelle s'ouvre et que la barre de défilement réapparaît, elle sera restaurée et l'effet visuel n'est pas convivial. Si vous connaissez la largeur de la barre de défilement lorsqu'il y en a une, l'ajout de l'attribut padding-right au corps peut compenser cet effet bon marché.

Déclencher la fenêtre pop-up

Enfin, selon le script ci-dessus, le lien pour déclencher la fenêtre pop-up est le suivant

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

rel=" rs-dialog" signifie qu'il s'agit d'un déclencheur de fenêtre pop-up. Le lien

data-target="myModal" signifie ouvrir la fenêtre pop-up avec l'ID HTML myModal.

Pour plus d'articles liés à la couche contextuelle du masque modal Bootstrap (version complète), veuillez faire attention au site Web PHP chinois !