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

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>