怎样定位和设计一个弹出框

1、<iframe>

方法：

（1）首先在index.html主页面用<iframe>

（2）这个弹出页面用<div>包含总的东西

（3）这个<div>的位置用：

{   position: absolute;

        z-index: 1000;

        left: 239px;

        top:165px;

}

来定位其在index.html页面的位置。

（2）<div>

<div id="_diaBackground" class="ui-window-mask" style="opacity: 0.7; z-index: 5; display: block; background: rgb(0, 0, 0);display:none"> </div>

<!--弹层部分-->

 <div class="ui-dialog z-ui-dialog-in" style="position: fixed; width: 930px; height: 569px; left: 481.5px; top: 167px; z-index: 6;display:none"> 

     <div class="_diaContent">

              <!--     弹出层的内容部分   -->

    <div class="dialog_img">
        <div class="dialog_btn"></div>
    </div>

<!--     弹出层的内容部分   -->

    </div>

 </div>

<!--弹层部分-->

<!--触发弹层的按钮-->

<div class="return-detail" style=" cursor: pointer;  position:fixed; background: url(http://a.vpimg4.com/upload/actpics/uidesign/2015/12m/1210return/btn.png) no-repeat; width: 142px;  height: 42px;  right: 160px; top: 500; "></div>

<!--触发弹层的按钮-->

<style>

     :root .ui-window-mask {

    -webkit-filter: none;

    filter: none;

    }

    .ui-window-mask {

    /*display: none;*/

    position: fixed;

    _position: absolute;

    z-index: 1000;

    width: 100%;

    height: 100%;

    left: 0;

    top: 0;

    background: rgba(0,0,0,.7);

    filter: progid:DXImageTransform.Microsoft.gradient(startcolorstr=#B2000000, endcolorstr=#B2000000);

    }

    //弹出层的关闭

    .dialog_btn {

    position: absolute;

    right: 0;

    top: 0;

    background: url(http://a.vpimg4.com/upload/actpics/uidesign/2015/12m/1210return/close.png) no-repeat;

    width: 40px;

    height: 40px;

    cursor: pointer;

    }

</style>

<script>

//打开弹层

      $('.return-detail').on('click',function () {

       $('#_diaBackground').fadeIn(300);

       $('.ui-dialog').fadeIn(300);

    })

//关闭弹层

    $('.dialog_btn').on('click',function () {

       $('#_diaBackground').fadeOut(300);

       $('.ui-dialog').fadeOut(300);

    })

</script>