JQuery实现页⾯弹出框本⽂实例为⼤家分享了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" 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;
/*宽度继承popUpBox的，不需要设置*/
height: 40px;
border: 1px solid black;
}
#BoxHead>*{
/*只有⼀⾏，将line-heigh的数值设置的和⽗容器的⾼度⼀样*/
/*可以实现垂直居中*/
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" src="../js/jquery-1.11.0.min.js" ></script>
<script>
function ShowBox(BoxID){
//获取页⾯要显⽰的弹出框的id
var popBox = $("#"+BoxID);
//⽤show()⽅法使其显⽰出来
css实现垂直水平居中popBox.show();
}
function HideBox(BoxID){
//获取页⾯要隐藏的弹出框的id
var popBox = $("#"+BoxID);
//⽤hide()⽅法使其隐藏
popBox.hide();
}
</script>
</html>
最终效果：
上⾯这就是⽤JQ对弹出框功能的实现，实际应⽤中建议从外部引⼊CSS⽂件，免得太乱了，还有就是JQ的show()和hide()可以设置speed参数，就显⽰和隐藏的速度，会有⼀个淡⼊淡出的效果。
hide(1000);
show(1000);
以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。