模态对话框

HTML:

    <div class="modal hide">
        <form action="/classes.html" method="post">
            <input type="text" id='caption' name="caption" placeholder="标题">
            <input type="submit" value="确定">
            <input type="button" id="modal_ajax" value="Ajax确定">
            <input type="button" id="id_modal_cancel" value="取消">
        </form>
    </div>
    <div class="shade hide"></div>

 

css:

.modal{
             position: fixed;
            top: 50%;
            left: 50%;
            width: 500px;
            height: 400px;
            margin-top: -250px;
            margin-left: -250px;
            z-index: 100;
            background-color: white;
        }


 .shade{
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            border: 0;
            width: 100%;
            height: 100%;
            background-color: black;
            {#透明度#}
            opacity: 0.5;
            z-index: 99;
        }

    .hide{
            display: none;
        }

 

 

 

js: 

弹窗模态对话框，

id_add 是弹出模态对话框按钮的id

  function  bindAddEvent() {
            $('#id_add').click(function () {
                $('.modal,.shade').removeClass('hide');

            });
        }

 

 

关闭模态对话框：

id_modal_cancel是关闭模态对话框按钮的id

        function  bindCancelEvent() {
            $('#id_modal_cancel').click(function () {
                $('.modal,.shade,.remove').addClass('hide');

            });
        }