成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

簡(jiǎn)單實(shí)現(xiàn)彈出彈框頁面背景半透明灰，彈框內(nèi)容可滾動(dòng)原頁面內(nèi)容不可滾動(dòng)的效果(JQuery)

番茄西紅柿 / 2677人閱讀

摘要：當(dāng)彈框彈出時(shí)原頁面內(nèi)容不能滾動(dòng)，即將樣式設(shè)為原頁面的內(nèi)容就不會(huì)動(dòng)了當(dāng)彈框關(guān)閉后再將樣式改為默認(rèn)的中的寫一個(gè)函數(shù)，再在彈框的中調(diào)用函數(shù)。

彈出彈框

效果展示

實(shí)現(xiàn)原理

  1. html結(jié)構(gòu)比較簡(jiǎn)單，即：

    遮罩層
    
    彈框

  2. 先寫覆蓋顯示窗口的遮罩層div.box，因?yàn)橐谡麄€(gè)窗口顯示固定，所以position要設(shè)為fixed，background設(shè)為灰色半透明，由于要遮住整個(gè)顯示屏，width和height都設(shè)為100%(body和html的width和height也都設(shè)為100%);

  3. 在遮罩層的div.box里寫彈框的div.container，位置相對(duì)于父級(jí)定位

代碼實(shí)現(xiàn)

HTML:

1 <div>
2     <button class="open">點(diǎn)我彈出彈框button>
3 div>
4 <div class="box">
5     <div class="container">
6         <button class="close">關(guān)閉彈框button>
7     div>
8 div>
 

CSS:

 1 html, body {
 2     width:100%;
 3     height:100%;
 4 }
 5 .box {
 6     display: none;
 7     width: 100%;
 8     height: 100%;
 9     position: fixed;
10     top: 0;
11     left: 0;
12     background: rgba(51,51,51,0.5);
13     z-index: 3;//根據(jù)自己頁面情況設(shè)置
14 }
15 .container {
16     width: 500px;
17     height: 200px;
18     position: absolute;
19     top: 50%;//以下3行設(shè)置彈框居中頁面，根據(jù)自己頁面情況選擇
20     left: 50%;
21     transform: translate(-50%, -50%);
22     background: #fff;
23     z-index: 5;//根據(jù)自己頁面情況設(shè)置
24 }
 

JavaScript:

1 $(document).ready(function(){
2     $(".open").click(function(){
3         $(".box").show();
4     })
5     $(".close").click(function(){
6         $(".box").hide();
7     })
8 })

 

原頁面內(nèi)容不可滾動(dòng)彈框內(nèi)容可滾動(dòng)

效果展示

實(shí)現(xiàn)原理

  1. 彈框內(nèi)容需要滾動(dòng)一定是內(nèi)容超出彈框的高度，所以要給彈框內(nèi)想滾動(dòng)的部分設(shè)overflow: auto;

  2. 然后是Jq實(shí)現(xiàn)部分。當(dāng)彈框彈出時(shí)原頁面內(nèi)容不能滾動(dòng)，即將body樣式設(shè)為overflow: hidden;原頁面的內(nèi)容就不會(huì)動(dòng)了；當(dāng)彈框關(guān)閉后再將body樣式改為默認(rèn)的overflow: auto;

  3. 2中的JS寫一個(gè)函數(shù)，再在彈框的JQ中調(diào)用函數(shù)。

代碼實(shí)現(xiàn)

CSS:

.container中增加一條

1 .container {
2     overflow: auto;
3 }
 

JavaScript:

1 function toggleBody(isPopup) {
2     if (isPopup) {
3         document.body.style.height = 100%;
4         document.body.style.overflow = hidden;
5     }else {
6         document.body.style.height = auto;
7         document.body.style.overflow = auto;
8     }
9 }
 

JQ中需要增加調(diào)用toggleBody()函數(shù)

1 $(".open").click(function(){
2     $(".box").show();
3     toggleBody(1);//增加部分
4 })
5 $(".close").click(fundtion(){
6     $(".box").hide();
7     toggleBody(0);//增加部分
8 })
 

 *有錯(cuò)誤的地方歡迎指正

 *轉(zhuǎn)載請(qǐng)注明出處

 

 

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1254.html

相關(guān)文章

  • 移動(dòng)端下彈框禁止背景滑動(dòng)

    摘要：移動(dòng)端下彈框禁止背景滑動(dòng)茴字寫法有很多種，找到最適合的才是好的。 移動(dòng)端下彈框禁止背景滑動(dòng) 茴字寫法有很多種，找到最適合的才是好的。 以下下方法在一屛之內(nèi)是可行的 body;html 設(shè)置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 彈出時(shí) $(html, body,.pa...

    pf_miles 評(píng)論0 收藏0

  • 移動(dòng)端下彈框禁止背景滑動(dòng)

    摘要：移動(dòng)端下彈框禁止背景滑動(dòng)茴字寫法有很多種，找到最適合的才是好的。 移動(dòng)端下彈框禁止背景滑動(dòng) 茴字寫法有很多種，找到最適合的才是好的。 以下下方法在一屛之內(nèi)是可行的 body;html 設(shè)置overflow:hidden .overflow-hidden{ height: 100%; overflow: hidden; } // 彈出時(shí) $(html, body,.pa...

    baukh789 評(píng)論0 收藏0

  • 懶加載、瀑布流和LightBox實(shí)現(xiàn)圖片搜索效果

    摘要：無非就是獲取用戶輸入的獲取圖片信息組裝填充頁面數(shù)據(jù)瀑布流布局處理在頁面滾動(dòng)時(shí)判斷最后一張圖片是否可見，如果是則重復(fù)以上內(nèi)容查看源碼 開始 做一個(gè)小項(xiàng)目，算是對(duì)js和jQuery的一次練習(xí)吧。 圖片資源來自這個(gè)網(wǎng)站（上面有很多高清圖片關(guān)鍵還是免費(fèi)下載的）：https://unsplash.com/ 項(xiàng)目具體效果可以點(diǎn)這里：https://bjw1234.github.io/ima......

    rainyang 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<