純粋なJSは極めて簡単なポップアップボックスを実現する
4475 ワード
前端の白は恥をかいて、実現の構想を説明します.には2つのdivがポップアップボックスを構成している.2つのdivのレベルは兄弟関係です. のうちの1つのdivは、後のコンテンツ を隠すためである.の2番目のdivは、ポップアップボックスの実際のコンテンツ を表示するためである.
htmlセクション
css部分
JavaScriptセクション
htmlセクション
<div id="modelDiv">
div>
<div id="model">
<div style="float: right;height: 20px; width: 20px;border-radius: 50%; border: 2px solid red;text-align: center;" onclick="closeModel()">
X
div>
div>css部分
// CSS
#modelDiv {
height: 100%;
width: 100%;
//
position: absolute;
top:0;
left:0;
background: silver;
//
opacity:0.8;
// ， ， 。
z-index: 99;
}
// CSS
#model {
width: 300px;
height: 200px;
background: #959FA9;
border-radius: 10px;
padding: 15px;
position: absolute;
top: 200px;
left: 42%;
z-index: 99;
}JavaScriptセクション
// 。
// ， 。
document.body.style.overflow = 'hidden';
/**
*
*/
function closeModel() {
document.getElementById("model").style.display = 'none';
document.getElementById("modelDiv").style.display = 'none';
// body ，
document.body.style.overflow = 'auto';
}