欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JQuery實(shí)現(xiàn)頁(yè)面彈出框

 更新時(shí)間：2022年02月22日 15:40:14   作者：不大好不大好  
這篇文章主要為大家詳細(xì)介紹了JQuery實(shí)現(xiàn)頁(yè)面彈出框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JQuery實(shí)現(xiàn)頁(yè)面彈出框的具體代碼，供大家參考，具體內(nèi)容如下

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

今天嘗試用JQ來(lái)實(shí)現(xiàn)一下，具體的思路就是：

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

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

<head>
?? ?<meta charset="UTF-8">
?? ?<title>頁(yè)面彈出框</title>
?? ?<style>
?? ??? ?#popUpBox{
?? ??? ??? ?display: block;?? ??? ?//一開(kāi)始應(yīng)該是隱藏狀態(tài)，所以是none
?? ??? ??? ?width: 1080px;?? ?//彈出框的寬
?? ??? ??? ?height: 630px;?? ?//彈出框的高
?? ??? ??? ?background-color: yellow;
?? ??? ??? ?margin:0 auto;?? ?//彈出框頁(yè)面居中
?? ??? ?}
?? ??? ?</style>
?? ?</head>
<body>
?? ?<button id="ShowBox" onclick="ShowBox('popUpBox')">點(diǎn)擊顯示彈出框</button>
?? ?<div id="popUpBox">
?? ??? ?//里面是彈出框的內(nèi)容?? ?
?? ?</div>
</body>

第二步：引入JQ文件和寫(xiě)函數(shù)實(shí)現(xiàn)功能

<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
<script>
?? ?function ShowBox(BoxID){
?? ??? ?//獲取頁(yè)面要顯示的彈出框的id
?? ??? ?var popBox = $("#"+BoxID);
?? ??? ?//用show()方法使其顯示出來(lái)
?? ??? ?popBox.show();
?? ?}
?? ?function HideBox(BoxID){
?? ??? ?//獲取頁(yè)面要隱藏的彈出框的id
?? ??? ?var popBox = $("#"+BoxID);
?? ??? ?//用hide()方法使其隱藏
?? ??? ?popBox.hide();
?? ?}
</script>

效果：

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

<!DOCTYPE html>
<html>
?? ?<head>
?? ??? ?<meta charset="UTF-8">
?? ??? ?<title>頁(yè)面彈出框</title>
?? ??? ?<style>
?? ??? ??? ?#popUpBox{
?? ??? ??? ??? ?display: none;
?? ??? ??? ??? ?width: 1080px;
?? ??? ??? ??? ?height: 630px;
?? ??? ??? ??? ?margin: 0 auto;
?? ??? ??? ??? ?background-color: yellow;
?? ??? ??? ?}
?? ??? ??? ?#BoxHead{
?? ??? ??? ??? ?/*文字水平居中*/
?? ??? ??? ??? ?text-align: center;?? ?
?? ??? ??? ??? ?/*寬度繼承popUpBox的,不需要設(shè)置*/
?? ??? ??? ??? ?height: 40px;
?? ??? ??? ??? ?border: 1px solid black;
?? ??? ??? ?}
?? ??? ??? ?#BoxHead>*{
?? ??? ??? ??? ?/*只有一行,將line-heigh的數(shù)值設(shè)置的和父容器的高度一樣*/
?? ??? ??? ??? ?/*可以實(shí)現(xiàn)垂直居中*/
?? ??? ??? ??? ?line-height: 40px;
?? ??? ??? ?}
?? ??? ??? ?#BoxHead>a{
?? ??? ??? ??? ?float: right;
?? ??? ??? ??? ?margin-right: 10px;
?? ??? ??? ?}
?? ??? ?</style>
?? ?</head>
?? ?<body>
?? ??? ?<button id="ShowBox" onclick="ShowBox('popUpBox')">點(diǎn)擊顯示彈出框</button>
?? ??? ?<div id="popUpBox">
?? ??? ??? ?<!--彈出框的頭部，里面有彈出框標(biāo)題和關(guān)閉按鈕-->
?? ??? ??? ?<div id="BoxHead">
?? ??? ??? ??? ?<label>彈出框</label>
?? ??? ??? ??? ?<a href="javascript:void(0)" onclick="HideBox('popUpBox')">x</a>
?? ??? ??? ?</div>
?? ??? ??? ?<!--彈出框的主體部分-->
?? ??? ??? ?<div id="BoxBody"></div>
?? ??? ??? ?<!--彈出框的底部，可以加一些功能按鈕，比如說(shuō)保存按鈕-->
?? ??? ??? ?<div id="BoxFooter"></div>
?? ??? ?</div>
?? ?</body>
?? ?<script type="text/javascript" src="../js/jquery-1.11.0.min.js" ></script>
?? ?<script>
?? ??? ?function ShowBox(BoxID){
?? ??? ??? ?//獲取頁(yè)面要顯示的彈出框的id
?? ??? ??? ?var popBox = $("#"+BoxID);
?? ??? ??? ?//用show()方法使其顯示出來(lái)
?? ??? ??? ?popBox.show();
?? ??? ?}
?? ??? ?function HideBox(BoxID){
?? ??? ??? ?//獲取頁(yè)面要隱藏的彈出框的id
?? ??? ??? ?var popBox = $("#"+BoxID);
?? ??? ??? ?//用hide()方法使其隱藏
?? ??? ??? ?popBox.hide();
?? ??? ?}
?? ?</script>
</html>

最終效果：

上面這就是用JQ對(duì)彈出框功能的實(shí)現(xiàn)，實(shí)際應(yīng)用中建議從外部引入CSS文件，免得太亂了，還有就是JQ的show()和hide()可以設(shè)置speed參數(shù)，就顯示和隱藏的速度，會(huì)有一個(gè)淡入淡出的效果。

hide(1000);
show(1000);

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論