收藏本站 更换配色
主节点200M网络集群 ddoss.cn |海外30M集群 eisc.cn | 主机监控系统: 安全防火墙已开启检查cc攻击-下载文件完成后等待10s 恢复访问，检查连接数低于峰值恢复访问
ddoss
发布文章
 
收藏文章 楼主

div+css+js实现弹出框

版块：javaScript   类型：普通   作者：小绿叶技术博客   查看：4001   回复：0   获赞：2   时间：2019-06-04 08:27:59

#=========================弹出复选框============================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>对话框案例</title>

</head>

<script language="javascript">

function checkfill()

{

var uid=document.getElementById("txtuid").value;

var pwd=document.getElementById("txtpwd").value;

if(uid==""||pwd=="")

{

alert("用户名或口令均不能为空！");

return false;

}

return true;

}

function openwin()

{

window.open("depart.html","dw","width=200,height=100,top=300,left=300");

}

</script>

<body>

<form id="form1" name="form1" method="post" action="ScrollImage.html" onsubmit="return checkfill()">

  <p>

    <input name="button" type="button" id="button" onclick="alert('不准再点我！');" value="alert" />

    <input name="button2" type="button" id="button2" onclick="alert(confirm('你确定要删除这条记录?'));" value="confirm" />

    <input name="button3" type="button" id="button3" onclick="alert(prompt('请输入你期望的工资：',999999));" value="prompt" />

  </p>

  <p>模拟登录</p>

  <p>

    <label for="txtdepart">单位：</label>

    <input type="text" name="txtdepart" id="txtdepart" />

    <input type="button" name="button5" id="button5" value="选取" onclick="openwin()"/>

  </p>

  <p>

    <label for="txtuid">帐号：</label>

    <input type="text" name="txtuid" id="txtuid" />

  </p>

  <p>

    <label for="txtpwd">密码：</label>

    <input type="text" name="txtpwd" id="txtpwd" />

  </p>

  <p>

    <input type="submit" name="button4" id="button4" value="提交" />

  </p>

</form>

</body>

</html>

#===========================被弹出的复选框=========================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>单位选择</title>

</head>


<script language="javascript">

function closewin(){

window.close();

var bj=document.getElementById("lstClass").value;

window.opener.document.getElementById("txtdepart").value=bj;

}

</script>

<body>

<form id="form1" name="form1" method="post" action="">

  <label for="lstClass"></label>

  <select name="lstClass" id="lstClass">

    <option>软件1</option>

    <option>云计算2</option>

    <option>云计算1</option>

    <option>移动1班</option>

  </select>

  <input type="button" name="button" id="button" value="确定" onclick="closewin()"/>

</form>

</body>

</html>

#==========================================================================

======================案例效果2=========================

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>弹出层案例</title>

</head>

<style type="text/css">

#fullLayer{

position:absolute;

display:none;

top:0px;

left:0px;

right:0px;

bottom:0px;

background-color:#636;

z-index:10;

-moz-opacity: 0.8;

opacity:.80;

filter: alpha(opacity=80);

}

#popLayer{

position:absolute;

z-index:11;

display:none;

width:200px;

height:150px;

top:0;

left:0;

right:0;

bottom:0;

margin:auto;

border:#000 1px dotted;

}

#titleLayer{

 text-align:right;

     background-color:#39C;

}

a{

text-decoration:none;

}

</style>

<script language="javascript">

function popdiv(){

var bg=document.getElementById("fullLayer");

var pp=document.getElementById("popLayer");

bg.style.display="block";

pp.style.display="block";

}

function closediv(){

var bg=document.getElementById("fullLayer");

var pp=document.getElementById("popLayer");

bg.style.display="none";

pp.style.display="none";

}

</script>

<body>

<div>

  <form id="form1" name="form1" method="post" action="">

    <input type="button" name="button"  id="button" value="弹出" onclick="popdiv()" />

    <div id="fullLayer"></div>

    <div id="popLayer">

      <div id="titleLayer"><a href="#" onclick="closediv()">关闭;</a></div>

      弹出层

    </div>

  </form>

</div>

</body>

</html>

#=======================参考资料==================


div+css+js实现弹出框

 

面试被问到如何让弹出框居中，然而自己没有做过弹出框，搜资料，自己就试着做了一个。

 

效果：

点击弹出框按钮后，页面上显示一个弹出框，并且背景要变成灰色，原始页面不能被操作的，直到关闭弹出框。 

原理：

在原页面的基础上添加两个格，一个是弹出层，一个是遮罩层，即背景层。这两个div和原始页面是在一个文件中，首先通过设置display：none;让这两个div不显示，然后通过给弹出框按钮和关闭按钮绑定事件来实现弹出框的显示和隐藏; 

实现：

1。先实现页面布局;一个弹出框按钮，一个背景层，一个弹出层，一个关闭按钮。

 

<input type="button" name="popBox" value="弹出框" onclick="popBox()">

<div id="popLayer"></div>

<div id="popBox">

<div class="close">

<a href="javascript:void(0)" onclick="closeBox()">关闭</a>

</div>

<div class="content">我是弹出层</div>

</div>

2.设置弹出层和背景层的display属性为none;让他们默认隐藏不显示;

 

3.先给两个div设置背景颜色，方便查看;

 

4.设置背景层的定位;

 

position: absolute;

top: 0;

right: 0;

bottom: 0;

left: 0;

5.设置弹出层的显示大小，并且居中显示;

 

width: 200px;

height: 200px;

position:fixed;

top:50%;

left:50%;

transform:translateX(-50%) translateY(-50%);

6.使用z-index属性设置背景层和弹出层的上下位置，值越大越靠上显示;

 

7.设置背景层的透明度; 

 

8.对关闭按钮的样式做调整;哦了。

 

完整代码：

 

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport"

          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

<meta http-equiv="X-UA-Compatible" content="ie=edge">

<title>div+css+js实现弹出框</title>

<script src="js/jquery-3.3.1.js"></script>

<style>

        /*背景层*/

        #popLayer {

            display: none;

            background-color: #B3B3B3;

            position: absolute;

            top: 0;

            right: 0;

            bottom: 0;

            left: 0;

            z-index: 10;

            -moz-opacity: 0.8;

            opacity:.80;

            filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */

        }

 

        /*弹出层*/

        #popBox {

            display: none;

            background-color: #FFFFFF;

            z-index: 11;

            width: 200px;

            height: 200px;

position:fixed;

            top:0;

            right:0;

            left:0;

            bottom:0;

margin:auto;

        }

 

        #popBox .close{

            text-align: right;

            margin-right: 5px;

            background-color: #F8F8F8;

        }

 

        /*关闭按钮*/

        #popBox .close a {

            text-decoration: none;

            color: #2D2C3B;

        }

 

</style>

</head>

<body>

<input type="button" name="popBox" value="弹出框" onclick="popBox()">

<div id="popLayer"></div>

<div id="popBox">

<div class="close">

<a href="javascript:void(0)" onclick="closeBox()">关闭</a>

</div>

<div class="content">我是弹出层</div>

</div>

<script>

    /*点击弹出按钮*/

    function popBox() {

        var popBox = document.getElementById("popBox");

        var popLayer = document.getElementById("popLayer");

popBox.style.display = "block";

popLayer.style.display = "block";

    };

 

    /*点击关闭按钮*/

    function closeBox() {

        var popBox = document.getElementById("popBox");

        var popLayer = document.getElementById("popLayer");

popBox.style.display = "none";

popLayer.style.display = "none";

    }

</script>

</body>

</html>

提供企业建站服务，免费网防系统，提交信息登录 http://yundun.ddoss.cn 邮箱： proposal@ddoss.cn 
回复列表
默认   热门   正序   倒序
首1尾

回复：div+css+js实现弹出框

 登录
注册 
or
暂无用户组
退出
等级：0级
金钱：
游客：
后台控制面板
推荐文章
  1. 禁止下载图片
  2. 图片跟随鼠标
  3. KVM面试题-期末复习-虚拟化
  4. 计算器
  5. 实验平台安全承诺书
  6. 输入框限制类型
  7. 半期考试复习资料--KVM虚拟化
  8. parted 磁盘分区-挂载-删除-shell脚本进行磁盘分区
  9. Linux的Shell--Sed操作(指定行增加删除内容)
  10. 登录界面-JSP

Powered by ddoss.cn 12.0

©2015 - 2025 ddoss

公网安备 渝公网安备50011302222260号 渝ICP备2024035333号 【实验平台安全承诺书】 小绿叶技术社区，优化网络中，点击查看配置信息
主机监控系统: 安全防火墙已开启检查cc攻击-下载文件完成后等待10s 恢复访问，检查连接数低于峰值恢复访问

您的IP:216.73.216.110,2025-12-01 15:19:04,Processed in 0.01528 second(s).

头像

用户名：

粉丝数：

签名：

资料 关注 好友 消息