使用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);" οnclick="Submit();">修改</a>
                </div>
                <div id="pay">
                    <a id="btn2" href="javascript:void(0);" οnclick='onClose();'>返回</a>
                </div>
            </div>
        </section>
    </div>

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