JQuery实现页面弹出框
短信预约 -IT技能 免费直播动态提醒
本文实例为大家分享了JQuery实现页面弹出框的具体代码，供大家参考，具体内容如下
bootstrap4里面有个模态框，点击页面中的某个按钮或者元素就会弹出一个框框：
今天尝试用JQ来实现一下，具体的思路就是：
1、在页面中创建一个div
2、用JQ中的hide()和show()来控制上面的div的隐藏和显示
第一步：创建按钮，div，样式
<head>
<meta charset="UTF-8">
<title>页面弹出框</title>
<style>
#popUpBox{
display: block; //一开始应该是隐藏状态，所以是none
width: 1080px; //弹出框的宽
height: 630px; //弹出框的高
background-color: yellow;
margin:0 auto; //弹出框页面居中
}
</style>
</head>
<body>
<button id="ShowBox" onclick="ShowBox('popUpBox')">点击显示弹出框</button>
<div id="popUpBox">
//里面是弹出框的内容
</div>
</body>第二步：引入JQ文件和写函数实现功能
<script type="text/javascript" class="lazy" data-src="../js/jquery-1.11.0.min.js" ></script>
<script>
function ShowBox(BoxID){
//获取页面要显示的弹出框的id
var popBox = $("#"+BoxID);
//用show()方法使其显示出来
popBox.show();
}
function HideBox(BoxID){
//获取页面要隐藏的弹出框的id
var popBox = $("#"+BoxID);
//用hide()方法使其隐藏
popBox.hide();
}
</script>效果：
第三步：优化一下弹出框的细节，比如右上角给它加个关闭的功能等等，放上全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面弹出框</title>
<style>
#popUpBox{
display: none;
width: 1080px;
height: 630px;
margin: 0 auto;
background-color: yellow;
}
#BoxHead{
text-align: center;
height: 40px;
border: 1px solid black;
}
#BoxHead>*{
line-height: 40px;
}
#BoxHead>a{
float: right;
margin-right: 10px;
}
</style>
</head>
<body>
<button id="ShowBox" onclick="ShowBox('popUpBox')">点击显示弹出框</button>
<div id="popUpBox">
<!--弹出框的头部，里面有弹出框标题和关闭按钮-->
<div id="BoxHead">
<label>弹出框</label>
<a href="javascript:void(0)" onclick="HideBox('popUpBox')">x</a>
</div>
<!--弹出框的主体部分-->
<div id="BoxBody"></div>
<!--弹出框的底部，可以加一些功能按钮，比如说保存按钮-->
<div id="BoxFooter"></div>
</div>
</body>
<script type="text/javascript" class="lazy" data-src="../js/jquery-1.11.0.min.js" ></script>
<script>
function ShowBox(BoxID){
//获取页面要显示的弹出框的id
var popBox = $("#"+BoxID);
//用show()方法使其显示出来
popBox.show();
}
function HideBox(BoxID){
//获取页面要隐藏的弹出框的id
var popBox = $("#"+BoxID);
//用hide()方法使其隐藏
popBox.hide();
}
</script>
</html>最终效果：
上面这就是用JQ对弹出框功能的实现，实际应用中建议从外部引入CSS文件，免得太乱了，还有就是JQ的show()和hide()可以设置speed参数，就显示和隐藏的速度，会有一个淡入淡出的效果。
hide(1000);
show(1000);以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程网。
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
