本文实例为大家分享了jq实现界面点击按钮 弹出悬浮框的具体代码，供大家参考，

首先定义两个div:

一个是背景，一个是悬浮窗。

 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();
    });