半透明のマスク層効果は、基本的にプラグインを使用して達成されます。半透明のマスク効果を実現するために、ネイティブJSを使用してください。興味のある友達はそれを参照できます。ネイティブJSに精通していることが役立つことを願っています。
<div> <h4> <span>登録今すぐ</span> <span> close </span> </h4> <p> <p> <p> <p> <p> <po> username </label> <入力タイプ= "text" onmouseover = "this.style.border = '1px solid＃f60'" onfoucs = "this.style.border = '1px lood ff60'" " onblur = "this.style.border = '1px solid＃ccc'"/> </p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <p> <pond <input> <input type = "password" onmouseover = "this.style.border = '1px solid＃f60'" onfoucs = "this.style.border = '1pxソリッド＃f60'" '" onblur = "this.style.border = '1px solid #ccc'" "/> </p> <p> <punt type =" subming "value =" register "/> <input Type =" reset "value =" reset "/> </p> </div> <div> </div> <！ - マスクレイヤーdiv-> document.getElementById（ "alert"）; var mymask = document.getElementById（ 'mask'）; var reg = document.getElementById（ "content"）。getElementsByTagname（ "a"）[0]; var mclose = document.getElementById（ "close"）; reg.onclick = function（）{mymask.style.display = "block"; myalert.style.display = "block"; myalert.style.position = "absolute"; myalert.style.top = "50％"; myalert.style.left = "50％"; myalert.style.margintop = "-75px"; myalert.style.marginleft = "-150px"; document.body.style.overflow = "hidden"; } mclose.onclick = function（）{myalert.style.display = "none"; mymask.style.display = "none"; } </script> </body> </html>フルスクリーンカバー
<！doctype html> <style> #mask {position：sixt; width：100％;上：0px;左：0px; _ポジション：絶対; _top：expression（documentlement.scrolltop）;背景：RGBA（0,0,0,0.5）;背景：透明/9;フィルター：progid：dmimagetransform.microsoft.gradient（startcolorstr =＃80000000、endcolorstr =＃80000000）;表示：なし;}＃mask_td {text-align：center;} </style> <img src = "http://web-tinker.com/images/themagicconch.jpg" id = "img"/> <table id = "mask" "> <tr> <td id =" mask_td "> </td>> < var isie = navigator.useragent.match（/msie（/d）/i）; isie = isie？isie [1]：isie; //変数var img、mask; //要素を取得しますimg = document.getElementById（ "img"）; mask = document.getElementbyId（ "mask"）; mask.td = document.getElementById（ "mask_td"）; // mask.setsize = function（）{// bir documentelethに設定して、document（// mask.style.width = de.clientwidth+"px" mask.style.height = de.clientheight+"px" mask.style.height = de.clientheight+"px";}; // ] .style.overflow = "hidden"; // Mask Mask.Setsize（）のサイズを計算します。 // show mask.style.display = isie == 6？ "block"： "table";}; // Hided method mask.hide = function（）{//ページscrollbar document [isie <9？ "documentlement"： "body"] .style.overflow = ""; // mask.td.innerhtml = ""内のコンテンツをクリアします; // mask.style.display = "none";}; //付録メソッドmask.append = function（e）{//マスクTDにコンテンツを追加する、mask.td.appendchild（e）;}; // mask.onclick = function（e）{// coshe of of eaves of eaves of of eaves of of the eaves of of the eaves of the event of the eave of of the evers of eas of the evers of of ecsion （e.target || e.srcelement）== mask.td && mask.hide（）;}; //フォームサイズがwindow.onresize = function（）{mask.setsize（）;}; //画像イベントimg.onclick = function（）{）{//クリックします。 //画像アドレスを設定しますo.src = img.src; // Content Mask.Append（o）; // mask mask.show（）;}; </script>を表示します