div模拟弹出框

时间:2024-03-12 11:01:37

方法一、结合jquery与css前台页面定位,滚动页面时不闪烁(强烈推荐)

1、定义CSS

    <style type="text/css">
        body {
            height: 100%;
            overflow: auto;
            margin: 0;
        }
        #test_Div {
            position: fixed;
            _position: absolute;
            top: 50%;
            left: 50%;
            border: 2px solid #C0C0C0;/*弹出框边框样式*/
            background-color: #FFFFFF;/*弹出框背景色*/
            display:none;
        }
        * html {
            overflow: hidden;
            position: absolute;
        }
    </style>

2、定义javascript

      要实现效果,首先引入jquery类库及jquery_ui

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery_ui/js/jquery-ui-1.9.2.custom.min.js"></script>

 (特别注意:显示弹出层时,如果弹出层为table则display:\'\',如果是div,则display:block

        //弹出层
        function show_Win(div_Win, tr_Title, event) {
            var s_Width = document.documentElement.scrollWidth; //滚动 宽度
            var s_Height = document.documentElement.scrollHeight; //滚动 高度
            var js_Title = $(document.getElementById(tr_Title)); //标题
            js_Title.css("cursor", "move");
            //创建遮罩层
            $("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body");
            //获取弹出层
            var msgObj = $("#" + div_Win);
            msgObj.css(\'display\', \'block\'); //必须先弹出此行,否则msgObj[0].offsetHeight为0,因为"display":"none"时,offsetHeight无法取到数据;如果弹出框为table,则为\'\',如果为div,则为block,否则textbox长度无法充满td
            //y轴位置
            var js_Top = -parseInt(msgObj.height()) / 2 + "px";
            //x轴位置
            var js_Left = -parseInt(msgObj.width()) / 2 + "px";
            msgObj.css({ "margin-left": js_Left, "margin-top": js_Top });
            //使弹出层可移动
            msgObj.draggable({ handle: js_Title, scroll: false });
        }

3、调用

        <input type="button" value="测试弹出框" onclick="show_Win(\'div_Test\', \'title\', event)" />
        <div id="div_Test">
            <div id="title" style="border: 1px solid red;">标题</div>
            内容
        </div>

方法二、结合jquery与css后台页面定位,滚动页面时闪烁(不推荐)

 1、定义javascript

要实现效果,首先引入jquery类库及jquery_ui

    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script type="text/javascript" src="js/jquery_ui/js/jquery-ui-1.9.2.custom.min.js"></script>

 (特别注意:显示弹出层时,如果弹出层为table则display:\'\',如果是div,则display:block

        //弹出层
        function show_Win(div_Win, tr_Title, event) {
            var s_Width = document.documentElement.scrollWidth; //滚动 宽度
            var s_Height = document.documentElement.scrollHeight; //滚动 高度
            var js_Title = $(document.getElementById(tr_Title)); //标题
            js_Title.css("cursor", "move");
            //创建遮罩层
            $("<div id=\"div_Bg\"></div>").css({ "position": "absolute", "left": "0px", "right": "0px", "width": s_Width + "px", "height": s_Height + "px", "background-color": "#ffffff", "opacity": "0.6" }).prependTo("body");
            //获取弹出层
            var msgObj = $("#" + div_Win);
            msgObj.css(\'display\', \'block\'); //必须先弹出此行,否则msgObj[0].offsetHeight为0,因为"display":"none"时,offsetHeight无法取到数据;如果弹出框为table,则为\'\',如果为div,则为block,否则textbox长度无法充满td
            //弹出层居中
            centre_Second(div_Win);
            //窗体滚动或缩放时,保证弹出框居中
            $(window).bind("resize scroll", function () { centre_Second(div_Win); })
            //使弹出层可移动
            msgObj.draggable({ handle: js_Title, scroll: false });
        }
        //弹出框居中(方法一)
        function centre_First(div_Win) {
            //获取弹出层
            var msgObj = $(document.getElementById(div_Win));
            var c_Width = document.documentElement.clientWidth; //可见 宽度
            var s_Left = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft; //据左边距 宽度(document.body的加入是为了兼容safari浏览器)
            var c_Height = document.documentElement.clientHeight; //可见 高度
            var s_Top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //距上边距 高度(document.body的加入是为了兼容safari浏览器)
            //y轴位置
            var js_Top = (c_Height - parseInt(msgObj.height())) / 2 + s_Top + "px";
            //x轴位置
            var js_Left = (c_Width - parseInt(msgObj.width())) / 2 + s_Left + "px";
            msgObj.css({ "position": "absolute", "top": js_Top, "left": js_Left, "background-color": "#ffffff", "border": "double 4px #4876FF" });
        }
        //弹出框居中(方法二)
        function centre_Second(div_Win) {
            //获取弹出层
            var msgObj = $(document.getElementById(div_Win));
            var s_Left = document.documentElement.scrollLeft || window.pageXOffset || document.body.scrollLeft; //据左边距 宽度(document.body的加入是为了兼容safari浏览器)
            var s_Top = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop; //距上边距 高度(document.body的加入是为了兼容safari浏览器)
            //y轴位置
            var js_Top = -parseInt(msgObj.height()) / 2 + s_Top + "px";
            //x轴位置
            var js_Left = -parseInt(msgObj.width()) / 2 + s_Left + "px";
            msgObj.css({ "position": "absolute", "top": "50%", "left": "50%", "margin-left": js_Left, "margin-top": js_Top, "background-color": "#ffffff", "border": "double 4px #4876FF" });
        }

3、调用

        <input type="button" value="测试弹出框" onclick="show_Win(\'div_Test\', \'title\', event)" />
        <div id="div_Test">
            <div id="title" style="border: 1px solid red;">标题</div>
            内容
        </div>

方法三、纯javascript,不能随滚动条滚动(不推荐)

代码
var c_Width, //可见 宽度
s_Width, //滚动 宽度
s_Left, //据左边距 宽度
c_Height, //可见 高度
s_Height, //滚动 高度
s_Top, //距上边距 高度
js_Top, //弹出框距 上边框 距离
js_Left, //弹出框距 左边框 距离
js_Title; //标题行
function show_Win(div_Win, tr_Title, event) {
    c_Width 
= document.documentElement.clientWidth; //可见 宽度
    s_Width = document.documentElement.scrollWidth; //滚动 宽度
    s_Left = document.documentElement.scrollLeft || document.body.scrollLeft; //据左边距 宽度(document.body的加入是为了兼容safari浏览器)
    c_Height = document.documentElement.clientHeight; //可见 高度
    s_Height = document.documentElement.scrollHeight; //滚动 高度
    s_Top = document.documentElement.scrollTop || document.body.scrollTop; //距上边距 高度(document.body的加入是为了兼容safari浏览器)
    js_Title = $("#" + tr_Title); //标题
    js_Title.css("cursor","move");
    
//创建遮罩层
    $("<div id=\"div_Bg\"></div>").css({ "position""absolute""left""0px""right""0px""width": s_Width + "px""height": s_Height + "px""background-color""#ffffff""opacity""0.6""z-index""2147483583" }).prependTo("body");
    
//获取弹出层
    var msgObj = $("#" + div_Win);
    
    
//从鼠标点击控件的位置 到 屏幕居中位置渐变
    var obj = $(event.target || event.srcElement);
    js_X 
= obj.offset().left; //被点击按钮距 上边距 距离
    js_Y = obj.offset().top; //被点击按钮距 左边距 距离
    msgObj.css("display","block"); //必须先弹出此行,否则msgObj[0].offsetHeight为0,因为"display":"none"时,offsetHeight无法取到数据
    //y轴位置
    js_Top = (c_Height - parseInt(msgObj[0].offsetHeight)) / 2 + s_Top + "px";
    
//x轴位置
    js_Left = (c_Width - parseInt(msgObj[0].offsetWidth)) / 2 + s_Left + "px";
    msgObj.css(
"display""none");//为了运行animate效果,再隐藏
    msgObj.css({ "position""absolute""top": js_Y, "left": js_X, "background-color""#ffffff""border""double 4px #808080""z-index""2147483647" }).animate({ top: js_Top, left: js_Left, width: \'toggle\', height: \'toggle\' });

    
//处理移动事件
    element = document.getElementById(div_Win);
    drag_element 
= document.getElementById(tr_Title);
    drag_element[
\'target\'= div_Win;
    drag_element.onmousedown 
= pop_mousedown;
}

var pop_dragging = false//是否允许拖拽
var pop_target; //目标
var pop_mouseX;
var pop_mouseY;
var pop_mouseposX;
var pop_mouseposY;
var pop_oldfunction;
//mousedown
function pop_mousedown(e) {
    
var ie = navigator.appName == "Microsoft Internet Explorer";
    
if (ie && window.event.button != 1return;
    
if (!ie && e.button != 0return;
    pop_dragging 
= true;
    pop_target 
= this[\'target\'];
    pop_mouseX 
= ie ? window.event.clientX : e.clientX;
    pop_mouseY 
= ie ? window.event.clientY : e.clientY;
    
if (ie) pop_oldfunction = document.onselectstart;
    
else pop_oldfunction = document.onmousedown;
    
if (ie) document.onselectstart = new Function("return false;");
    
else document.onmousedown = new Function("return false;");
}
//mousemove
function pop_mousemove(e) {
    
if (!pop_dragging) return;
    
var ie = navigator.appName == "Microsoft Internet Explorer";
    
var element = document.getElementById(pop_target); //移动的dom
    var mouseX = ie ? window.event.clientX : e.clientX;
    
var mouseY = ie ? window.event.clientY : e.clientY;
    element.style.left 
= (element.offsetLeft + mouseX - pop_mouseX) + "px";
    element.style.top 
= (element.offsetTop + mouseY - pop_mouseY) + "px";
    pop_mouseX 
= ie ? window.event.clientX : e.clientX;
    pop_mouseY 
= ie ? window.event.clientY : e.clientY;
}
//mouseup
function pop_mouseup(e) {
    
if (!pop_dragging) return;
    pop_dragging 
= false;
    
var ie = navigator.appName == "Microsoft Internet Explorer";
    
var element = document.getElementById(pop_target);
    
if (ie) document.onselectstart = pop_oldfunction;
    
else document.onmousedown = pop_oldfunction;
}
//mouseposition
function pop_mousepo(e) {
    
var ie = navigator.appName == "Microsoft Internet Explorer";
    pop_mouseposX 
= ie ? window.event.clientX : e.clientX;
    pop_mouseposY 
= ie ? window.event.clientY : e.clientY;
}

if (navigator.appName == "Microsoft Internet Explorer") {
    document.attachEvent(
\'onmousedown\', pop_mousepo);
else document.addEventListener(\'mousedown\', pop_mousepo, false);
if (navigator.appName == "Microsoft Internet Explorer") {
    document.attachEvent(
\'onmousemove\', pop_mousemove);
else document.addEventListener(\'mousemove\', pop_mousemove, false);
if (navigator.appName == "Microsoft Internet Explorer") {
    document.attachEvent(
\'onmouseup\', pop_mouseup);
else document.addEventListener(\'mouseup\', pop_mouseup, false);


function close_Win(div_Win) {
    
var div_Bg = $("#div_Bg");
    div_Bg.remove();
    $(
"#" + div_Win).fadeOut(300);
}
 

 调用:

    <script src="js/jquery-1.4.2.js" type="text/javascript"></script>
    
<script src="js/js_Test.js" type="text/javascript"></script>
代码
<input type="button" value="点击此处实验" onclick="show_Win_Test(\'div_Pop\',\'tr_Title\',event)" />
    
<div id="div_Pop" style="display: none; width: 600px; height: 400px;">
        
<table style="width: 100%;">
            
<tr id="tr_Title">
                
<td>
                    标题
                
</td>
            
</tr>
            
<tr style="border: 1px solid red">
                
<td>
                    内容
                
</td>
            
</tr>
        
</table>
        
<input type="button" value="关闭" onclick="close_Win_Test(\'div_Pop\')" />
    
</div>