div模拟弹出框

最新推荐文章于 2020-05-11 18:23:00 发布
最新推荐文章于 2020-05-11 18:23:00 发布
阅读量1k 收藏
点赞数

Refer from http://www.cnblogs.com/duhongyu216/articles/1441785.html;  http://www.jb51.net/article/20656.htm

方法一、结合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  !=   1 )  return ;
     if  ( ! ie  &&  e.button  !=   0 )  return ;
    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 >
复制代码

 


CV_2013
关注
DIV模拟弹出框
10-21
用js写的div模拟弹出框,经过改写可以变成自定义的alert框
div弹出框js弹出框
06-25
div弹出框,js弹出框,轻松轻松定制
Div弹框
深水鱼儿
08-31 974
在编写页面的时候，我们有时只是需要一个弹出框而不许要重新写一个页面的时候可以利用div弹框轻松应对。 jsp 代码：显示和隐藏弹出框 js 代码： // 打开弹出对话框1 var dlgType1 = 1; var dlg1 = null; function showPDC1(){ if(dlg1){ dlg1.show();
Div弹出框
aaa2549769750的博客
05-25 362
1.Div实现弹出登录窗口 JavaScript实现弹出窗口实质上就是在浏览器上画了一个方形区域，并在开始时将其隐藏，只是到某个JavaScript事件时才通过修改css的属性值来将其显示出来。 具体详见代码：（注意，本div弹出层还不能被拖动，拖动效果有待进一步的实现） <html> <head> <title>jQueryDi...
div模拟弹框窗口
weixin_30496431的博客
07-31 286
css代码 .myWin { display: none; position: absolute; top: 15%; left: 10%; width: 55%; height: 55%; padding: 20px; /* border: 10px solid #5298d1; */ background-color: #7cd8d7; z-index: 1002; ...
javascript用DIV模拟弹出窗口_窗体滚动跟随
10-30
### JavaScript 使用 DIV 模拟弹出窗口与窗体滚动跟随技术解析 #### 一、概述 在网页设计中，为了实现更加丰富的交互效果，开发者常常需要实现一些特殊的功能，比如弹出窗口。传统的弹出窗口可能通过浏览器自身的 ...
div模拟选择框示例代码
12-09
首先，我们看到标题是"div模拟选择框示例代码"，这意味着我们将使用`<div>`标签来代替传统的`<select>`标签来创建一个自定义的下拉选择框。`<div>`是一个非常通用的容器标签，可以用来组织页面结构，并通过CSS进行...
div模拟弹出层
06-26
在网页设计和开发中，"div模拟弹出层"是一种常见的交互设计技术，它允许开发者在用户与页面交互时提供额外的信息或者功能。通常，弹出层是通过JavaScript（JS）来实现的，以模拟像alert这样的系统级对话框，但更加...
JS模拟Dialog弹出浮动框效果代码
10-23
标题中提到的“JS模拟Dialog弹出浮动框效果代码”，描述了通过JavaScript实现一个可拖动的弹出窗口，这种窗口可以用于创建登录框或者后台管理界面中的弹出对话框。这种技术在网页开发中非常常见，用于增强用户交互...
DIV弹出框
iteye_4348的博客
11-18 181
比如在某个商城中，将一件商品加入购物车，按了按钮后弹出DIV框： function inputadd(goodsid){ document.getElementById("gidtemp").value=goodsid; //document.getElementById("ggnum").focus(); document.getElementById("showw...
DIV实现弹出框
07-27
DIV实现弹出框, 实现登录， 有关闭按钮
漂亮的div弹出窗口样式
10-29
一个漂亮的div弹出窗口样式 解压后双击html页面即可
纯js（javascript）弹出层 对话框，div 模拟系统对话框
05-22
纯js（javascript） 弹出层 对话框 弹出层，可以有半透明遮挡层。 div 模拟系统对话框，Alert Confirm Prompt
纯CSS实现div弹出对话框
10-17
纯CSS实现div弹出对话框 可以应用于C#，.net 里面。 页面比较好看。
js 用div模拟广告弹出框
Cupid
05-11 196
代码：自动弹出框，3秒之后消失 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=...
js+div实现弹出框
qazxsw635241的博客
06-19 4038
<input type="button" name="popBox" value="弹出框" onclick="popBox()"> <div id="popLayer"></div> <div id="popBox"> <div class="close"> <a href="javascript:voi...
div+css+js实现弹出框
热门推荐
半夏半暖半倾城的博客
09-02 6万+
面试被问到如何让弹出框居中，然而自己没有做过弹出框，搜资料，自己就试着做了一个。 效果：点击弹出框按钮后，页面上显示一个弹出框，并且背景要变成灰色，原始页面不能被操作的，直到关闭弹出框。  原理：在原页面的基础上添加两个格，一个是弹出层，一个是遮罩层，即背景层。这两个div和原始页面是在一个文件中，首先通过设置display：none;让这两个div不显示，然后通过给弹出框按钮和关闭按钮绑定事件...
div 模拟alert弹出框
weixin_30722589的博客
08-04 885
--------------信息展示弹出框---------------- <style> .over{background-color: rgba(0, 0, 0, 0.7);display: block;height: 100%;left: 0;position: fixed;top: 0;width: 100%;z-index: 998;} .alert...
DIV模拟弹出窗口(支持拖动)
Wind_Lam的专栏
05-11 1110
 现在高版本浏览器都可以设置对弹出窗口进行拦截，所有的浏览器工具条等都对弹出窗口进行拦截，但是有时候我们确实需要弹出窗口。针对这些我们做了一个简单的效果，没有做太多的测试，只是示意一下！div弹出窗口<!--#drag{ width:250px; height:20px; border:1px solid #333; position:absolute;
使用JS+DIV+CSS实现弹出窗口示例
这个例子展示了如何模拟弹出窗口，适用于网页中的交互式设计。" 在这个示例中，主要涉及了三个关键技术：JavaScript（js）、HTML div 和 CSS。首先，我们来看HTML部分： HTML 代码创建了两个div元素，一个用于弹出...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值