부트스트랩 모달 마스크 팝업 레이어(풀 버전)

Bootstrap을 모방한 Bootstrap 모달은 외부 레이어에 고정을 추가한 다음 콘텐츠에 대해 적응형 상단 중앙 정렬 방법을 사용합니다. 오늘 제가 공유하는 기사가 바로 그 내용을 담고 있습니다.

html 구조

콘텐츠 영역을 중앙에 배치해야 한다는 점을 고려하여 배경을 배치하고 표시하려면 div가 하나 이상 있어야 하며, 이후 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가 전체 창을 덮도록 하려면 위쪽, 오른쪽, 왼쪽 및 아래쪽 속성을 0으로 설정하면 됩니다.

컨텐츠 영역이 너무 긴 경우 본문(또는 HTML)의 오버플로 속성을 숨김으로 설정하고 브라우저의 실제 스크롤 막대가 표시되지 않도록 한 다음 팝업을 제공하여 브라우저의 세로 스크롤 막대를 시뮬레이션합니다. up window 가장 바깥쪽 레이어의 div에 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();
});
});
});

웹페이지 콘텐츠 이동 방지

팝업 창을 열 때 본문에 Overflow:hidden 속성을 추가하면 스크롤 막대가 사라집니다. 팝업창이 열렸다가 다시 스크롤바가 나타나면 다시 원래 상태로 돌아가서 시각효과가 불편합니다. 스크롤 막대의 너비를 알고 있는 경우 본문에 padding-right 속성을 추가하면 이 저렴한 효과를 상쇄할 수 있습니다.

팝업창 실행

마지막으로 위 스크립트에 따라 팝업창을 실행하는 링크는 다음과 같습니다

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

rel=" rs-dialog"는 이것이 팝업 창 트리거임을 의미합니다.

data-target="myModal" 링크는 HTML ID myModal을 사용하여 팝업 창을 여는 것을 의미합니다.

부트스트랩 모달 마스크 팝업레이어(풀버전)에 대한 더 많은 글은 PHP 중국어 홈페이지를 주목해주세요!