JQ implements click pop-up dialog box

The example in this article shares the specific code of jq to realize the pop-up floating box by clicking the button on the interface, for your reference.

First define two divs:

One is the background and the other is the floating window.

 html

<div>
<input class="Dialog_button" type="button" value="点击弹出层" />
<!--弹出层时背景层DIV-->
 <div id="fade" class="black_overlay"></div>
 <!-- 编辑框 可以加自己的样式 -->
 <div id="MyDiv" class="Dialog_content pd20">
  6666
</div>

css

   /* 弹框 */
        .black_overlay {
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            width: 100%;
            height: 100%;
            background-color: rgb(0, 0, 0, 0.5);
            z-index: 1001;
            -moz-opacity: 0.8;
            opacity: .80;
            filter: alpha(opacity=80);
        }

        .Dialog_content {
            display: none;
            position: absolute;
            top: 10%;
            width: 800px;
            height: 80%;
            background-color: white;
            z-index: 1002;
            overflow: auto;
        }

jq

  //关闭弹出层  
    $("#fade").click(function () {
        $("#MyDiv").hide();
        $("#fade").hide();
    });
    $(".Close_Dialog").click(function () {
        $("#MyDiv").hide();
        $("#fade").hide();
    });