Heim > Artikel > Web-Frontend > js, um NetEase-Klick-Popup-Eingabeaufforderungen und Hintergrundverdunkelungseffekte zu imitieren. Javascript-Fähigkeiten

js, um NetEase-Klick-Popup-Eingabeaufforderungen und Hintergrundverdunkelungseffekte zu imitieren. Javascript-Fähigkeiten

WBOYOriginal: 2016-05-16 15:45:20948Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie js NetEase-Klick-Popup-Eingabeaufforderungen imitieren und den Hintergrundeffekt abdunkeln kann. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Die Popup-Eingabeaufforderung hier wird von NetEase nachgeahmt, mit dem Ebeneneffekt der Hintergrundverdunkelung, abgerundeten Ecken, schön und prägnant und etwas zu viel Code.

Der Betriebseffekt ist wie folgt:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-sina-dialog-bgcolor-codes/

Der spezifische Code lautet wie folgt:

<html>
<head>
<title>点击弹出提示，背景变暗</title>
<script>
function msg(info){
var p=document.createElement("DIV");
if (!info) var info='<a href="#" target="_blank" rel="external">欢迎光临</a>';
p.id="p";
p.style.position="absolute";
p.style.width=document.body.scrollWidth;
p.style.height=(document.body.offsetHeight>document.body.scrollHeight)&#63;'100%':document.body.scrollHeight;
p.style.zIndex='998';
p.style.top='0px';
 p.style.left='0%';
p.style.backgroundColor="gray";
p.style.opacity='0.5';
p.style.filter="alpha(opacity=80)";
document.body.appendChild(p);
var p1=document.createElement("DIV");
var top=parseInt(parseInt(document.body.scrollHeight)*0.25)+document.body.scrollTop;
p1.style.position="absolute";
p1.style.width="300px";
p1.id="p1";
var left=Math.ceil(((document.body.scrollWidth)-parseInt(p1.style.width.replace('px','')))/2)+document.body.scrollLeft;
p1.style.height="200px";
p1.style.zIndex='999';
p1.style.top=top+'px';
 p1.style.left=left+'px';
p1.style.border="0px solid red";
var html="";
 html+="<center>"
 html+="<div class='p3' style='height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red;'></div>"
 html+="<div class='p2' style='height:1px;overflow:hidden;background:red;width:296px;border-left:1px solid red;border-right:1px solid red;'></div>"
 html+="<div class='p2' style='height:1px;overflow:hidden;background:red;width:298px;border-left:1px solid red;border-right:1px solid red;'></div>"
 html+="<div class='p1' style='height:20px;overflow:hidden;background:red;width:300px;border-left:1px solid red;border-right:1px solid red;color:#fff;font-size:9pt;font-weight:bold;text-align:left;'> ⊙ 友情提示：</div>"
html+="<div id='c' style='height:150px;width:300px;background-color:#FEEACB;overflow:hidden;border-left:1px solid red;border-right:1px solid red;padding-top:40px;font-size:9pt;'>"+info+"<br><br><br>[ <a href='javascript:this.cancle()'> 关闭</a> ]</div>"
 html+="<div class='p1' style='height:1px;overflow:hidden;background:#FEEACB;width:298px;border-left:1px solid red;border-right:1px solid red;'></div>"
 html+="<div class='p2' style='height:1px;overflow:hidden;background:#FEEACB;width:296px;border-left:1px solid red;border-right:1px solid red;'></div>"
 html+="<div class='p3' style='height:1px;overflow:hidden;background:red;width:294px;border-left:1px solid red;border-right:1px solid red'></div>"
 html+="</center>"
document.body.appendChild(p1);
p1.innerHTML=html;
var arr=document.getElementsByTagName("select");
var i=0;
while(i<arr.length){
 arr[i].style.visibility='hidden';
 i++;
}
this.cancle=function(){
document.body.removeChild(document.getElementById('p'));
document.body.removeChild(document.getElementById('p1'));
var arr=document.getElementsByTagName("select");
 var i=0;
 while(i<arr.length){
 arr[i].style.visibility='visible';
 i++;
 }
}
}
</script>
</head>
<body>
<input value='点击弹出提示' type='button' onClick='msg()' />
</body>
</html>

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：JavaScript-Methode zum Einfügen des Werts des Textfelds in die angegebenen position_javascript-FähigkeitenNächster Artikel：JavaScript-Methode zum Einfügen des Werts des Textfelds in die angegebenen position_javascript-Fähigkeiten

In Verbindung stehende Artikel

Mehr sehen