javascript+html實現遮罩層效果

阿新 • • 發佈：2019-01-27

<!DOCTYPE html>  
<html>  
    <head>  
        <meta charset="UTF-8">  
        <title>遮罩層例項</title>  
    </head>  
    <body>  
        <button onclick="coverDiv()">顯示</button>  
    </body>  
    <script type="text/javascript">  
    //顯示遮罩   

    function coverDiv(){    
        var procbg = document.createElement("div"); //首先建立一個div    
        procbg.setAttribute("id","mybg"); //定義該div的id    
        procbg.style.background = "#000000";    
        procbg.style.width = "100%";    
        procbg.style.height = "100%";    
        procbg.style.position = "fixed" 
;    
        procbg.style.top = "0";    
        procbg.style.left = "0";    
        procbg.style.zIndex = "500";    
        procbg.style.opacity = "0.6";    
        procbg.style.filter = "Alpha(opacity=70)";    
        document.body.appendChild(procbg);    
    }    
    //取消遮罩    
    function hide() 
 {    
        var body = document.getElementsByTagName("body");    
        var mybg = document.getElementById("mybg");    
        body[0].removeChild(mybg);    
    }  
    </script>  
</html>

以上是完整例項。

javascript+html實現遮罩層效果

<!DOCTYPE html> <html> <head> <meta charset="UTF-8">

React Native之Modal元件實現遮罩層效果

React-Native中Modal的使用 /** * React Native App * dongtao 2017/04/22 * @flow */ import React, { Component } from 'react'; import { A

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

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

HTML 練習實現遮罩層

top 遮罩層練習 :hover ctype bili title head bottom <!DOCTYPE html> <html lang="en"> <head> <meta charset=&

JS實現遮罩層

ext size UNC document osi white body opacity get /* * 顯示loading遮罩層 */ function loading() { var mask_bg = document.createElement(

介面操作結果提示彈出框2--遮罩層效果

js包含了html程式碼和顯示消失的功能，忽然想起來link可以去掉css的，因為在其他html介面裡會呼叫這些css樣式 suernk.js如下： //brace.html裡的三個彈出框,為了避免呼叫麻煩,將彈出框放到js裡 //document.write("<link rel='

js 實現遮罩層鎖屏功能

我們需要對彈出的視窗進行強調突出表現，那麼需要對周圍的元素進行遮罩。並且周圍的元素還不可以進行操作，又需要進行鎖屏。最後我們需要對重複的程式碼進行封裝。一介面設計效果圖一效果圖2 二設定效果 1.做一個遮罩層建立一個可以佈滿整個瀏覽器的d

學習筆記3--CSS製作滑鼠放上後淡入透明遮罩層效果

transition： Internet Explorer 10、Firefox、Opera 和 Chrome 支援 transition 屬性。 Safari 支援替代的 -webkit

lua 中實現遮罩層和遮蔽層

--遮罩層 local maskLayer = CCLayerColor:create(ccc4(0, 0, 0, 120), visibleSize.width, visibleSi

點選按鈕Alert彈出遮罩層效果的提示框程式碼

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN"> <head> <title>經過改善優化的Alert彈出提示效果</titl

Android 實現遮罩動畫效果

為了實現遮罩效果動畫。android本身沒有提供api ，需要自己動手實現。將view和view的parentLy進行相反方向動畫即可實現該效果： AnimatorSet animatorSet

frameset巢狀的子頁面js彈出新頁面時，父頁面新增遮罩層效果

frameset巢狀的子頁面：新增遮罩層： $(‘html’, window.parent.document).append(‘<div class=”mtDiv” style=”position: fixed;top: 0%;left: 0%;w

【CSS】- 遮罩層效果

浪費了“黃金五年”的Java程式設計師，還有救嗎？ >>>

【Javascript學習筆記】【DOM實戰— —jQ實現點選任意位置關閉某處的效果（常用於模態框後面的遮罩層）】

【Javascript學習筆記】目錄目錄原理效果程式碼實戰程式碼快捷連結點選任意位置關閉某處而且點選對應處並不會hide掉自己原理

用JavaScript實現CheckBox的全選取消反選，及遮罩層中添加內容

document 當前 CI itl HA posit size classlist ML 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta cha

Winform應用程序實現通用遮罩層

圖片 ted containe completed ini spa mst per 動圖 Winform應用程序實現通用遮罩層在WEB上，我們在需要進行大數據或復雜邏輯處理時，由於耗時較長，一般我們會在處理過程中的頁面上顯示一個半透明的遮罩層，上面放個圖標或提示：

Winform應用程序實現通用遮罩層二

添加 str img 控件 text 邏輯 mar chang sha 之前先後發表過：《Winform應用程序實現通用遮罩層》、《Winform應用程序實現通用消息窗口》，這兩款遮罩層其實都是基於彈出窗口的，今天為大家分享一個比較簡單但界面相對友好的另一種實現方案，廢話不

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/

實現彈出層，遮罩層

point func relative cit get alpha fun javascrip pla 開發中經常會用到彈出遮罩層的時候，下面是一個簡單的遮罩層彈窗 <style type="text/css"> <

純CSS實現專案展示遮罩詳情效果

本例項主要用於專案展示時滑鼠hover後顯示一個遮罩顯示專案詳情的效果，遮罩採用CSS的絕對定位以及CSS3盒子模型。本例項應用廣泛，很多品牌官方網站均有采用。 hover： 1 <!DOCTYPE html> 2 <html> 3 4 <head

javascript+html實現遮罩層效果

相關推薦