使用js实现一个简单的模态框

    如果你的页面中，想要点击某个按钮，弹出你想要的一个页面，然后在这个页面中输入你想要的东西，而不想重新写一个页面的，我想模态框是一个很好的选择。

下面是关于实现模态框的一些样式，你们也可以自己去修改

<style>
*{
padding: 0;
margin: 0;
}
#l-modal_dialog{
height: 1000px;
position: fixed;
left: 0;
top: 0;
bottom:0;
right:0;
background: rgba(85,85,85,0.6);
z-index: 1000;
}
.l-modal_box{
height: 530px;
width: 1000px;
margin: 0 auto;
background: white;
text-align: center;
}
.l-modal_box h1,.l-modal_box P{
text-align: center;
margin-bottom: 20px;
}
#pay
{
height: 56px;
width: 200px;
background-color: #525263;
font-family: Helvetica,​Arial,​sans-serif;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 60px;
margin-left: 550px;
margin-top: -55px;
}
#update
{
height: 56px;
width: 200px;
background-color: #DE5D50;
font-family: Helvetica,​Arial,​sans-serif;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 60px;
margin-left: 250px;;
}
#update:hover{ background-color: #D85145;}
a{ text-decoration:none;}
#pay:hover { background-color: #8E8E99;}
#btn,#btn2{ color: white;}
.font-style{
color: #525263;
font-size: 18px;
}
#cust_id,#count,#points,#r_id,#p_id
{
width: 30%; height: 38px; padding-left: 10px;
margin-left: 30px;
border: 1px solid #c4ccce;
font-size: 1.6rem;
line-height: 1.5;
padding: 6px 12px;
}
#cust_id{
margin-right: -50px;
}
#span1{
color: red;
font-size: 14px;
margin-right: 60px;
}
#type{
border: 1px solid #c4ccce;
border-radius: 3px !important;
box-shadow: none;
font-size: 1.6rem;
height: 40px;
line-height: 1.5;
margin-right: -20px;
margin-left: 40px;
padding: 6px 12px;
width: 30%;
}
#tel{
margin-right: 40px;
}
.btn-style{
margin-top: 50px;
}
</style>

接下就是写的一些实现的方法：
<script>
$(document).ready(function () {
var Mt_hei = $("#l-modal_dialog>:first").height();
var Windows_hei = $(window).height();
$("#l-modal_dialog>:first").css("margin-top", (Windows_hei - Mt_hei) / 2);

$(window).resize(function () {
Windows_hei = $(window).height();
$("#l-modal_dialog>:first").css("margin-top", (Windows_hei - Mt_hei) / 2);
})
$("#l-modal_dialog").click(function () {
$(this).hide();
})
$("#l-modal_dialog>:first").click(function () {

return false;//清除冒泡
})
})
function onClose()
{
$("#l-modal_dialog").hide();
}
</script>

然后就是页面的显示：
<div id="l-modal_dialog" style='display: none;'>
<section class="l-modal_box">
<div>
<br/>
</div>
<div class='font-style'>
<p>Id: <span style=" margin-left: 250px; margin-right: 100px;" id='id'>1</span></p>
<p>用户Id：<span id='span1'>必填</span> <input type="text" value="" id="cust_id" />
<span style="color:red; margin-left: 30px;" id="name_yz"></span>
</p>
<p>积分类型： <span id='span1'>必填</span><select id='type'><option>请选择</option>
<option>add</option>
<option>sub</option>
</select>
<span style="color:red; margin-left: 30px;" id="pref_yz"></span>
</p>
<p>积分数量： <span id='span1'>必填</span><input type="text" value="" id="count"></p>
<p>总积分数：<span id='span1'>必填</span> <input type="text" value="" id="points" /></p>
<p>积分项目Id：<span id="span1">必填</span><input type="text" value="" id="p_id" /></p>
<p>积分规则Id：<span id="span1">必填</span><input type="text" value="" id="r_id" /></p>
</div>
<div class='btn-style'>
<div id='update'>
<a id="btn" href="javascript:void(0);" onclick="Submit();">修改</a>
</div>
<div id="pay">
<a id="btn2" href="javascript:void(0);" onclick='onClose();'>返回</a>
</div>
</div>
</section>
</div>

这是我做编辑积分的使用到的模态框，你也赶快实现起来吧