jQuery彈出關閉遮罩層

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery簡便實現遮罩層--柯樂義</title>
<script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js" 
></script>
</head>
<body>
<div style="background-color:Red; width:100%;height:150px;"><input type="button" onclick="show_keleyi_com()" value="顯示遮罩層" /> 顯示遮罩層後點擊右上角關閉</div>
<div style="background-color:Yellow; width:100%;height:282px;"><a href="http://keleyi.com/a/bjac/jp71q5jt.htm" target="_blank">http://keleyi.com/a/bjac/jp71q5jt.htm</a> 
</div>
<div style="background-color:Silver; width:100%;height:150px;">柯樂義</div>
<div style="background-color:Aqua; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Fuchsia; width:100%;height:150px;">keleyi</div>
<div style="background-color:Green; width:100%;height:150px;" 
>keleyi.com</div>
<div style="background-color:Blue; width:100%;height:150px;">柯樂義</div>
<div style="background-color:Olive; width:100%;height:150px;">柯樂義 返回頂部</div>
<div style="background-color:Green; width:100%;height:150px;">A</div>
<div style="background-color:Purple; width:100%;height:150px;">jquery</div>
<div style="background-color:Green; width:100%;height:150px;"><a href="http://keleyi.com/a/bjac/6f008786225269ac.htm" target="_blank">原文</a></div>
<div style="background-color:Lime; width:100%;height:150px;">keleyi.com</div>
<div style="background-color:Orange; width:100%;height:150px;">完整程式碼</div>
<div style="height:130px;"><div id="donwmsg_content" style="DISPLAY: block; HEIGHT: 162px">
<ul>
<li class="ll"><a href="http://keleyi.com/a/bjac/768f469b95b61487.htm" >單行文字間歇向上滾動</a></li>
<li><a href="http://keleyi.com/a/bjac/a6d651710217f7a0.htm" >jQuery UI修飾title氣泡</a></li>
<li><a href="http://keleyi.com/a/bjac/bf0eb8c02085b10d.htm" >jquery清空textarea等輸入框</a></li>
<li><a href="http://keleyi.com/a/bjac/939631bb07adb4dc.htm" >jquery關燈特效</a></li>
<li><a href="http://keleyi.com/a/bjac/7e8897e5ec0849e9.htm" >可改變大小DIV層</a></li>
</ul>
<div class="lb"><a href="http://keleyi.com/menu/jquery/" target="_blank">jQuery</a> 　 <a href="http://keleyi.com/menu/javascript/" target="_blank">Javascript</a> 　 <a href="http://keleyi.com/menu/cms/" target="_blank">CMS</a> </div>
</div></div>


<script type="text/javascript">
$("<div id='div_brg_keleyi_com'><img id='close_keleyi_com' src='http://keleyi.com/keleyi/phtml/xuanfudiv/images/nav-close.png' /></div>").css({
position:'absolute',
top:0,
left:0,
backgroundColor:"#004400",
opacity:0.5,
zIndex:300
})
.height($(document).height())
.width($(document).width()).hide().appendTo("body")

//需要遮罩的時候
function show_keleyi_com() {
$("#div_brg_keleyi_com").show();
}

$("#close_ke"+"leyi_com").click(function () {
//取消遮罩的時候
$("#div_brg_keleyi_com").hide();
}
)</script>
</body>
</html>

jQuery彈出關閉遮罩層

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

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

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

滑鼠經過彈出透明遮罩層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的值實現重新渲染，而介面是無

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

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

easyUI彈框被遮罩層遮擋

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

JS封裝彈起和關閉遮罩層的方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> <style

小程式彈出的遮罩只有一屏高度，滾動顯示出下面的UI

問題：彈出的遮罩，由於沒有處理小程式的滾動擊穿，在遮罩下的滾動檢視如果很長，則滑動頁面，遮罩也滾動，沒有全屏。解決辦法：將遮罩的高度設定為滾動頁面內容的高度。步驟：需要獲取滾動頁面的高度，獲取螢幕的高度。如果滾動內容的高度大於螢幕高，則設定遮罩style高度為滾動內容的高度，

jquery封裝了一個簡潔輕巧的可拖動可自定義樣式的純div+css帶遮罩層的仿模態彈出框

最近封裝上癮，想起以前做的一個輕巧的彈出框，是樣式和指令碼分離的，於是重新封裝了一下，把樣式標籤統一到js裡了。裡面還有一些問題，但不影響使用，有興趣的同學，可以參考完善下，有好的建議，請不吝賜教。 if (typeof jQuery === 'unde

jquery 彈出遮罩層

/* 修改密碼是彈出遮罩層 */// url:傳遞aspx頁面// heigth: 彈出頁面顯示高度// width: 彈出頁面顯示寬度function frmMaks(url, heigth, width) { $("body").append("<div class='DivMask'>

自寫jQuery插件，實現簡單網頁遮罩層/彈出層功能，兼容IE6、IE7

實現彈出層，遮罩層

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

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

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

web頁在微信中訪問增加遮罩層右上角彈出在瀏覽器中打開

osi nis scrip div ttr auto nav csdn img https://blog.csdn.net/zgsdzczh/article/details/79744838 web頁在微信中訪問增加遮罩層右上角彈出在瀏覽器中打開 <sty

easyui彈出加載遮罩層（轉）

data bsp yui 取消加載 true 彈出 pan doc outer //彈出加載層 function load() { $("<div class=\"datagrid-mask\"></div>").css({ displ

bootstrap在一個模態框上彈出另一個模態框遮罩層問題

bootstrap3官網明確指出千萬不要在一個模態框上重疊另一個模態框。要想同時支援多個模態框，需要自己寫額外的程式碼來實現。 bootstrap3相關原始碼分析開發過程中經常會遇到在一個模態框上彈出另一個模態框， bootstrap.css中&nbs

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

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

彈出遮罩層後，如何禁止底層頁面的滾動【轉】

彈窗是一種常見的互動方式，而蒙層則是彈窗必不可少的元素，用於隔斷頁面與彈窗區塊，暫時阻斷頁面的互動。但是，我們會發現，當彈出遮罩層後，底層body的內容也是可以滾動，顯然這不是我們想要的效果，而這個問題就是小萌最近開發專案時遇到的問題。一個小程式的專案，是用MPVUE(一個使用 Vue.js

artDialog5點選遮罩層關閉彈窗，

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

.aspx頁面彈出遮罩層

實現功能：點選Repeater資料表每行的某一個按鈕，彈出遮罩層顯示“資料獲取中，請稍後.....”，後臺進行資料獲取的操作，獲取完成後，彈出相應的訊息框。 ShowAbnoramlServer.aspx頁面相關程式碼(點選Repeater表“更新”按鈕，呼叫頭部Updat

jQuery彈出關閉遮罩層

相關推薦