彈窗和遮罩層的顯示隱藏及空白區域關閉

阿新 • • 發佈：2019-04-09

100% lac get .sh mouseup head nbsp show wid

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Commpatible" content="IE=edge">
    <title>HTML遮罩層</title>
    <style>
        body{
            background: aqua;
        }
        .shade{
            position: fixed;
            top:  
0;
            left: 0;
            right: 0;
            width: 100%;
            height: 100%;
            background: black;
            opacity: 0.6;
            display: none;
        }
        .dialog{
            display: none;
            position: relative;
            width: 200px;
            height: 200px;
            background: lightcoral;
        }
        .btn{
            position: absolute;
            width: 50px;
            height: 50px;
            top: 40px;
            left: 200px;
            background: #c1f088;
        }
     
</style>
</head>
<body>
 <div class="shade"></div>
 <div class="wrap">
    彈窗展示
 </div>
  <div class="dialog">
      <div class="content">內容區</div>
      <div class="btn">按鈕</div>
</div>
 <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.slim.js"></script>
 <script>
     // 
 彈窗顯示
     $(‘.wrap‘).click(function () {
         $(‘.shade‘).show()
         $(‘.dialog‘).show()
     })
     // 點擊關閉按鈕，彈窗隱藏
    $(‘.btn‘).click(function () {
        $(‘.shade‘).hide()
        $(‘.dialog‘).hide()
    })
     // 點擊空白區域，彈窗隱藏
     $(document).mouseup(function(e){
         var _con = $(‘.dialog ‘);   // 設置目標區域
         // 點擊事件的對象不是目標區域本身
         // 事件對象不是目標區域的子元素
         if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
             console.log(e)
             console.log(e.target)
             $(‘.shade‘).hide()
             $(‘.dialog‘).hide()
         }
     });

 </script>
</body>
</html>

彈窗和遮罩層的顯示隱藏及空白區域關閉

100% lac get .sh mouseup head nbsp show wid <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8

JS+CSS簡單實現DIV遮罩層顯示隱藏【轉藏】

button left dtd -m javascrip htm width dex absolute <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/

angular中model彈框消失後遮罩層未隱藏的解決方法

在做專案的時候，遇到個問題，在controller中執行彈出框隱藏函式後立即跳轉路由，出現遮罩層不隱藏的情況 showAlertDialog函式如圖，即1秒後模態框自動隱藏開啟瀏覽器除錯，看到頁面中有遮罩層，且元素中還存在一個modal-backd

頁面用一個遮罩層顯示載入，載入完後隱藏該div

<div id="background" class="background" style="display: none; "></div> <div id="progressBar" class="progressBar" style="display: none; "&

bootstrap模態框hide遮罩層不隱藏解決辦法

bootstrap modal 模態框 hide 問題：在使用ajax提交模態框表單數據後，隱藏模態框並局部刷新，導致遮罩層不消失原因：模態框隱藏並局部刷新，導致在hide方法沒執行完成時已經局部刷新，沒有隱藏掉遮罩層解決辦法：方法一：把模態框放在更上層頁面，而不是放在子頁面上方法二：利

easyUI彈框被遮罩層遮擋

async on() href 復制代碼 iss 無法 get 代碼 url 項目中用到easyui 布局，用到north,west,center三個區域，且在center中間區域嵌入iframe標簽。在主內容區做一些小提示彈窗（例如刪除前的彈窗提示確認）時，會遇到遮罩問題

html+css原始碼之實現登入彈出框遮罩層效果

在web開發中，很多網站都做了一些特別炫麗的效果，比如使用者登入彈框遮罩層效果，本文章向大家介紹css如何實現登入彈出框遮罩層效果，需要的朋友可以參考一下本文章的原始碼。 html+css實現登入彈出框遮罩層效果,原始

Bootstrap之modal關閉，但遮罩層無法隱藏

點選如下modal中的按鈕時，modal可以正常關閉。 <button v-if="flag == 'update' " data-dismiss="modal" class="btn btn-success btn-sm" @cli

滑鼠經過彈出透明遮罩層css寫法

.ai_demo{width: 250px; height: 250px; background:url("http://www.magpet.cn/images/upload/Image/87076179_snap(25).jpg") no-repeat scroll

微信小程式之modal彈出框遮罩層元件——可帶文字框

modal彈出框遮罩層可實現提示資訊、驗證碼等功能然而在官方文件已經刪除了modal的頁面，說要廢棄modal 就個人而言modal元件無法被wx.showModal完全替代。大家都知道小程式的wxml的元件可以通過改變js的值實現重新渲染，而介面是無

iOS在UIView遮罩層上擷取一塊透明區域(新手引導頁)

用於設定新手引導頁設定方法 - (CAShapeLayer *)addTransparencyViewWith:(UIBezierPath *)tempPath{ UIBezi

微信小程序彈出和隱藏遮罩層動畫以及五星評分

weixin cli pan ppm for 數組 HA 分層 ref 參考源碼： http://www.see-source.com/weixinwidget/detail.html?wid=82 https://blog.csdn.net/pcaxb/article

微信小程式彈出和隱藏遮罩層動畫以及五星評分

<view class='train_con'> <view class='head'> <text>{{bankname}}</text> <text class='count'>{{index+1}}/{{allquestion.leng

滑鼠移上圖片遮罩層的顯示隱藏

artDialog5點選遮罩層關閉彈窗，

artDialog是一個基於javascript編寫的對話方塊彈窗元件，它有較豐富的介面，完全可以滿足你專案中各類需求的實現。 artDialog4+ 官網地址：http://code.google.com/p/artdialog/ 有原生js版本，也有提供

DIV 灰色透明遮罩層，顯示，隱藏

QQ：285679784 歡迎加入技術交流QQ群80669150 (附加資訊：珠海 -＂Lzw )一起學習 ! <div id="Cond" style="width: 1366px; height: 768px; top: 0; left: 0; back

彈窗遮罩層原理及實現

一、說明：我們知道，如果在網頁中需要載入一個彈窗時同常是不希望點選到彈窗以外的區域從而導致錯誤操作的。這個時候呢我們就可以使用遮罩層來實現彈窗外部區域遮蔽的功能。二、原理：在彈窗和頁面之間建立一個div並使之鋪滿整個螢幕，同時讓這個div

jquery遮罩層彈窗程式碼

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery彈出層效果</title> <meta cont

手寫css彈窗遮罩層

專案需要，涉及到彈窗，所以就手寫一個，正好，展示一下我的前端能力。下面是程式碼，簡潔，直擊要害。只需要引入一下jquery的js檔案。效果圖：這是CSS程式碼：.cov{ width:100%; height:100%; background-color:rgba(0,

DIV CSS遮罩層（彈窗窗口）

public lang flow filter click ans doctype xhtml over <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org

彈窗和遮罩層的顯示隱藏及空白區域關閉

相關推薦