recherche

Maison >interface Web >js tutoriel >jQuery html5 implémente la couche contextuelle div et masque background_jquery

jQuery html5 implémente la couche contextuelle div et masque background_jquery

WBOY
WBOYoriginal
2016-05-16 16:03:561283parcourir

La fenêtre contextuelle apparaît en fondu et l'arrière-plan change de couleur et devient impossible à cliquer. Voir l'effet : http://runjs.cn/detail/t08gmoij

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>popup</title>
<script type="text/javascript" src="jquery-2.1.3.min.js"></script>
</head>
<style type="text/css">
#popup{
  position: absolute;display:none; z-index:3000; background-color:#FFF; left: 601px; top: 217px; height: 150px; width: 217px;line-height:94px;text-align:center;
  border: 1px solid #03F;
}
#embedding{
  position: absolute; background-color: #36F; top: 94px;height:56px; width:217px;line-height:56px;text-align:center;
}
a{
  text-decoration:none;
  font-family:"微软雅黑";
  font-size:18px;
  color:#FFF;
}
</style>
<script type="text/javascript">
$(function(){
  var url = null;
  $(document).on('click','button',function(){
    var text = $(this).text();
    switch(text){
      case 'OSChina':url = 'http://www.oschina.net/';break;
      case 'baidu':url = 'http://www.baidu.com/';break;
      case 'CSDN':url = 'http://bbs.csdn.net/home';break;
      }
    $('#text').text('是否确定前往 '+text+' &#63;');
    $('#loadingDiv').css('display','block');  
    $('#popup').slideDown();
  }); 
  $(document).on('click','a',function(){
    if($(this).text()=='确定'){
      location.href=url;
    }else{
      $('#loadingDiv').css('display','none'); 
      $('#popup').slideUp();
    }
  });
});
</script>
<body>
<div id="loadingDiv" style="position:fixed;display:none;z-index:2000;top:0px;left:0px;width:100%;height:100%;background-color:rgba(255,255,0,0.5)"></div>
<div id="popup">
  <span id="text"></span>
  <div id="embedding">
    <a href="javascript:void(0)">确定</a>   
    <a href="javascript:void(0)">取消</a>
  </div>
</div>
<button style="position: absolute; left: 233px; top: 260px;" >OSChina</button>
<button style="position: absolute; left: 233px; top: 320px;" >baidu</button>
<button style="position: absolute; left: 233px; top: 380px;" >CSDN</button>
</body>
</html>

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.

Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Méthode JavaScript pour glisser-déposer des éléments dans des pages Web_compétences JavascriptArticle suivant：Méthode JavaScript pour glisser-déposer des éléments dans des pages Web_compétences Javascript

Articles Liés

Voir plus