suchen

Heim  >  Artikel  >  Web-Frontend  >  Javascript-Implementierung eines Popup-Box-Beispielcodes, der nicht geschlossen werden kann

Javascript-Implementierung eines Popup-Box-Beispielcodes, der nicht geschlossen werden kann

怪我咯
怪我咯Original
2017-07-07 14:55:292121Durchsuche

In diesem Artikel wird der Beispielcode von Javascript zum Implementieren eines Popup-Fensters vorgestellt, das nicht geschlossen werden kann.

Jeder hat eine bösartige Werbung auf einer bestimmten Webseite gesehen, und sie kommt nach dem Schließen wieder raus! Warum, JS wird es Ihnen sagen

HTML

<body>
  <h3 class="whiteColor">无法关闭的弹框，打不死的小强!</h3>
  <p id="middleBox">
    <a href="javascript:;" class="close_btn" id="closeBtn"><img src="images/close_icon.png" alt="" class="will_close"></a>
    <ul class="parent_btn">
      <li><a href="/" class="btn_tel"><img src="images/icon_tel.gif" alt=""><span>拨打电话</span></a></li>
      <li><a href="/" class="btn_chat"><img src="images/icon_chat.gif" alt=""><span>快速留言</span></a></li>
    </ul>
  </p>
</body>

CSS

*{
  margin: 0;
  padding: 0;
  list-style: none;
  outline: none;
  box-sizing: border-box;
  text-decoration: none;
}
a { -webkit-touch-callout: none; text-decoration: none }
:focus { outline: 0 }
body{
  font-family: Helvetica, STHeiTi, "Microsoft YaHei", sans-serif;
  color: #595757;
  background-color: #fff;
  outline: 0;
  overflow-x: hidden;
  -webkit-tap-highlight-color:rgba(0,0,0,0);
}
img{
  border: none;
}
.whiteColor{
  color: #fff;
  text-align: center;
}
.flex_parent{
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
}
.flex_child{
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
}
/*middle_box*/
body{
  position: relative;
  background-color: #272822;
}
#middleBox{
  width: 260px;
  height: 248px;
  margin: 0 auto;
  background-image: url(../images/irfa_dog.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  border-radius: 10px;
  /*水平垂直居中*/
  position: fixed;
  left: 50%;
  top: 50%;
  margin-top: -124px;
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -o-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  z-index: 100;
}
.close_btn{
  display: block;
  overflow: hidden;
  position: absolute;
  top: -10px;
  right: -10px;
}
.will_close{
  width:32px;
}
#middleBox a{
  overflow: hidden;
}
#middleBox a img,#middleBox a span,#middleBox ul li{
  float: left;
}
#middleBox a span{
  font-size: 16px;
  color: #fff;
}
#middleBox ul{
  overflow: hidden;
}
#middleBox ul li{
  width: 130px;
}
#middleBox ul li a{
  line-height: 50px;
  display: block;
  padding-left: 5px;
}
#middleBox ul li a img{
  width:30px;
  margin-right: 2px;
  margin-top: 8px;
  margin-left: 5px;
}
.btn_tel{
  background-color: #F92665;
  border-bottom-left-radius: 10px;
}
.btn_chat{
  background-color: #1EA362;
  border-bottom-right-radius: 10px;
}
.parent_btn{
  position: absolute;
  left: 0;
  bottom: 0;
}

JS

/**
 * Created by Administrator on 2016/7/19.
 */
var adv={
  p:null,
  timer:null,
  btn:null,
  init:function(){
    this.btn=document.getElementById("closeBtn");
    this.p=document.getElementById("middleBox");
    this.btn.onclick=this.displayNone;
  },
  displayBlock:function(){
    adv.p.style.display="block";
  },
  displayNone:function(){
    adv.p.style.display="none";
    timer=setTimeout(function(){
      adv.displayBlock();
    },3000);
  }
};
window.onload=function(){
  adv.init();
};

Das obige ist der detaillierte Inhalt vonJavascript-Implementierung eines Popup-Box-Beispielcodes, der nicht geschlossen werden kann. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：js-Codebeispiel, um die Anzahl der Bytes der übermittelten Zeichenfolge abzurufenNächster Artikel：js-Codebeispiel, um die Anzahl der Bytes der übermittelten Zeichenfolge abzurufen

In Verbindung stehende Artikel

Mehr sehen