JQuery實現頁面彈出框

更新時間：2022年02月22日 15:40:14 作者：不大好不大好

這篇文章主要為大家詳細介紹了JQuery實現頁面彈出框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了JQuery實現頁面彈出框的具體代碼，供大家參考，具體內容如下

bootstrap4里面有個模態(tài)框，點擊頁面中的某個按鈕或者元素就會彈出一個框框：

今天嘗試用JQ來實現一下，具體的思路就是：

1、在頁面中創(chuàng)建一個div
2、用JQ中的hide()和show()來控制上面的div的隱藏和顯示

第一步：創(chuàng)建按鈕，div，樣式

<head>
?? ?<meta charset="UTF-8">
?? ?<title>頁面彈出框</title>
?? ?<style>
?? ??? ?#popUpBox{
?? ??? ??? ?display: block;?? ??? ?//一開始應該是隱藏狀態(tài)，所以是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>

效果：

第三步：優(yōu)化一下彈出框的細節(jié)，比如右上角給它加個關閉的功能等等，放上全部代碼

<!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()方法使其顯示出來
?? ??? ??? ?popBox.show();
?? ??? ?}
?? ??? ?function HideBox(BoxID){
?? ??? ??? ?//獲取頁面要隱藏的彈出框的id
?? ??? ??? ?var popBox = $("#"+BoxID);
?? ??? ??? ?//用hide()方法使其隱藏
?? ??? ??? ?popBox.hide();
?? ??? ?}
?? ?</script>
</html>

最終效果：