jQ实现带朦层得对话框dialog

一梦江湖费五年。归来风物故依然。相逢一醉是前缘。迁客不应常眊矂，使君为出小婵娟。翠鬟聊著小诗缠。

                                                                                                                                                                      ----苏轼

---

1.html布局是第一步：

<div>
 <div>
    <button onclick="healthHandle()">弹出对话框</button>
 </div>
 <!-- 蒙层 -->
 <div id="wrapOutter"></div>
 <!-- 对话框 -->
 <div class="dialog" id="delallpartdialog">
    <div class="title">
        <!-- <img alt="关闭" src="/static/images/disk.png" width="30px" height="30px;"> -->
        健康检查探测
    </div>
    <div class="content">
        <div class="explain">
            <span>探测结果供参考,健康检查以配置完成后实际结果为准.健康检查探测目前只支持同时探测5台ECS,ECS数量过大时请分批进行探测.</span>
            <a class="descript" href="healthyExplain.html">健康检查说明文档</a>
        </div>

        <table id="table2" class="table vm table-small-font no-mb table-bordered table-striped" style="overflow: auto;">
            <thead>
                <tr>
                    <th class="text-center"><input type="checkbox" name="enable" /></th>
                    <th class="text-center">后端服务器</th>
                    <th class="text-center">操作</th>
                    <th class="text-center">探测结果</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td class="text-center">
                        <input type="checkbox" name="enable" />
                    </td>
                    <td class="text-center">
                        <label>钉电云:</label>
                        <label>80</label>
                    </td>
                    <td class="text-center">
                        <label style="color: #007BFF;">开始探测</label>
                    </td>
                    <td class="text-center">
                        <label>--</label>
                    </td>
                </tr>
            </tbody>
      </div>
      <div class="bottom">
            <input type="button" value="确定" class="btnok">
            <input type="button" value="取消" class="btnnoOk">
      </div>
 </div>
</div>

 

2.css样式设计：

/* 对话框样式 */
    #wrapOutter{width: 100%;height: 100%; background: #000; position: absolute; 
            Opacity: 0.3;top: 0px; left: 0px; /* display: none; */z-index: 1000; }
    .dialog{width:1000px;background-color: #FFFFFF; border:1px #666 solid;position:absolute;left: 200px;top: 300px;z-index:1010;}
    .dialog .title {background: #fff;padding:10px; font-weight: bold; }
    .dialog .title img {float: right;}
    .dialog .content .explain {background: #f6f5ec;height: 60px;line-height: 60px;padding: 0 15px;}
    .dialog .content .descript {color: #007BFF;}
    .dialog .content img {float: left;}
    .dialog .content span {float: left;}
    .dialog .bottom {text-align: right;padding:10px 10px 10px 0px;background: #eee;}
    .dialog .btn {border: #666 1px solid;width:65px;}

3.js简单交互：

$(".dialog").hide();
$("#wrapOutter").hide();
//查看健康检查结果
function healthHandle() {
    $(".dialog").show();
    $("#wrapOutter").show();
}

$(".dialog").on("click", ".btnnoOk", function() {
    $(this).parents(".dialog").css("display", "none");
    $("#wrapOutter").hide();
});

$("#delallpartdialog").on("click", ".btnok", function() {
    $(this).parents(".dialog").css("display", "none");
    $("#wrapOutter").hide();
});

结语：jQ实现带朦层得对话框dialog主要使用了show()和hide()方法以及css得display: none;那您知道display:none;和visibility:hidden;的区别吗？请英雄移步至​​ css中隐藏的两种方式​​