Implémentation jQuery d'un exemple simple de fenêtre contextuelle

Cet article présente principalement en détail le code d'implémentation simple de la fenêtre contextuelle jQuery. Il a une certaine valeur de référence. Les amis intéressés peuvent s'y référer.

Aujourd'hui, nous avons parlé de la composition et de l'utilisation des fenêtres pop-up Jquery :

Écrivez d'abord le code qui fait référence au fichier :

// 每个弹窗的标识
var x =0;

var idzt = new Array();

var Window = function(config){
 
 //ID不重复
 idzt[x] = "zhuti"+x; //弹窗ID
 
 //初始化，接收参数
 this.config = {
  width : config.width || 300, //宽度
  height : config.height || 200, //高度
  buttons : config.buttons || '', //默认无按钮
  title : config.title || '标题', //标题
  content : config.content || '内容', //内容
  isMask : config.isMask == false?false:config.isMask || true, //是否遮罩
  isDrag : config.isDrag == false?false:config.isDrag || true, //是否移动
  };
 
 //加载弹出窗口
 var w = ($(window).width()-this.config.width)/2;
 var h = ($(window).height()-this.config.height)/2;
 
 var nr = "<p class=&#39;zhuti&#39; id=&#39;"+idzt[x]+"&#39; bs=&#39;"+x+"&#39; style=&#39;width:"+this.config.width+"px; height:"+this.config.height+"px; background-color:white; left:"+w+"px; top:"+h+"px;&#39;></p>";
 $("body").append(nr);
 
 //加载弹窗标题
 var content ="<p id=&#39;title"+x+"&#39; class=&#39;title&#39; bs=&#39;"+x+"&#39;>"+this.config.title+"<p id=&#39;close"+x+"&#39; class=&#39;close&#39; bs=&#39;"+x+"&#39;>×</p></p>";
 //加载弹窗内容
 var nrh = this.config.height - 75;
 content = content+"<p id=&#39;content"+x+"&#39; bs=&#39;"+x+"&#39; class=&#39;content&#39; style=&#39;width:100%; height:"+nrh+"px;&#39;>"+this.config.content+"</p>";
 //加载按钮
 content = content+"<p id=&#39;btnx"+x+"&#39; bs=&#39;"+x+"&#39; class=&#39;btnx&#39;>"+this.config.buttons+"</p>";
 
 //将标题、内容及按钮添加进窗口
 $(&#39;#&#39;+idzt[x]).html(content);
 
 
 //创建遮罩层
 if(this.config.isMask)
 {
  var zz = "<p id=&#39;zz&#39;></p>";
  $("body").append(zz);
  $("#zz").css(&#39;display&#39;,&#39;block&#39;);
 }
 
 //最大最小限制，以免移动到页面外
 var maxX = $(window).width()-this.config.width;
 var maxY = $(window).height()-this.config.height;
 var minX = 0,
  minY = 0;
 
 //窗口移动
 if(this.config.isDrag)
 {
  //鼠标移动弹出窗
  $(".title").bind("mousedown",function(e){
    
    var n = $(this).attr("bs"); //取标识
    
    //使选中的到最上层
    $(".zhuti").css("z-index",3);
    $(&#39;#&#39;+idzt[n]).css("z-index",4);
    
    //取初始坐标
    var endX = 0, //移动后X坐标
     endY = 0, //移动后Y坐标
     startX = parseInt($(&#39;#&#39;+idzt[n]).css("left")), //弹出层的初始X坐标
     startY = parseInt($(&#39;#&#39;+idzt[n]).css("top")), //弹出层的初始Y坐标
     downX = e.clientX, //鼠标按下时，鼠标的X坐标
     downY = e.clientY; //鼠标按下时，鼠标的Y坐标
     
    //绑定鼠标移动事件
    $("body").bind("mousemove",function(es){
     
     endX = es.clientX - downX + startX; //X坐标移动
     endY = es.clientY - downY + startY; //Y坐标移动
     
     //最大最小限制
     if(endX > maxX)
     {
      endX = maxX;
     } else if(endX < 0)
     {
      endX = 0;
     }
     if(endY > maxY)
     {
      endY = maxY;
     } else if(endY < 0)
     {
      endY = 0;
     }
     
     $(&#39;#&#39;+idzt[n]).css("top",endY+"px");
     $(&#39;#&#39;+idzt[n]).css("left",endX+"px");
     
     window.getSelection ? window.getSelection().removeAllRanges():document.selection.empty(); //取消选中文本
     
     });
   });
  //鼠标按键抬起，释放移动事件
  $("body").bind("mouseup",function(){
   
    $("body").unbind("mousemove");
   
   });
 }
 
 //关闭窗口
 $(".close").click(function(){
  
   var m = this.getAttribute("bs"); //找标识
   $(&#39;#&#39;+idzt[m]).remove(); //移除弹窗
   $(&#39;#zz&#39;).remove(); //移除遮罩 
  
  })
  
  x++; //标识增加
  
}

Ce JS Le fichier apparaîtra. Le contenu, le style, la position, les boutons et le calque de masque de la fenêtre ont tous été traités. Jetez un œil au code à l'intérieur avant de le citer. Il est également préférable de le comprendre. J'espère que cela pourra vous aider.

Ce qui suit est une feuille de style CSS :

.zhuti
{
 position:absolute;
 z-index:3;
 font-size:14px;
 border-radius:5px;
 box-shadow:0 0 5px white;
 overflow:hidden;
 color:#333;
}
.title
{
 background-color:#3498db;
 vertical-align:middle;
 height:35px;
 width:100%;
 line-height:35px;
 text-indent:1em;
}
.close{
 float:right;
 width:35px;
 height:35px;
 font-weight:bold;
 line-height:35px;
 vertical-align:middle;
 color:white;
 font-size:18px;
 }
.close:hover
{
 cursor:pointer;
}
.content
{
 text-indent:1em;
 padding-top:10px;
}
.btnx
{
 height:30px;
 width:100%;
 text-indent:1em;
}
.btn
{
 height:28px;
 width:80px;
 float:left;
 margin-left:20px;
 color:#333;
}
#zz
{
 width:100%;
 height:100%;
 opacity:0.15;
 display:none;
 background-color:#ccc;
 z-index:2;
 position:absolute;
 top:0px;
 left:0px;
}

Cette feuille de style a écrit chaque balise et le style requis, ce qui peut enregistrer la quantité de code sur la page principale et permettre au principal La page a l'air très soignée. Si vous souhaitez le changer, il vous suffit de le modifier dans la feuille de style CSS. Remarque : quel que soit le fichier que vous souhaitez référencer, le fichier Jquery doit être placé au premier plan ! ! !

Ce qui suit est le code de la page principale :

<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="jquery-1.11.2.min.js">
</script>
<script type="text/javascript" src="tanchuang.js">
</script>
<link href="tanchuang.css" rel="external nofollow" rel="stylesheet" type="text/css" />
<style type="text/css">
*{
 margin: 0px auto;
}
</style>
</head>

<body style="background-color:#999">
<p style="width:200px; margin-top:10px">
<input type="button" value="弹出窗口" id="btntc" style="width:100px; height:30px; font-size:18px;" />
</p>


</body>
<script type="text/javascript">
$(document).ready(function(e) {
 
 $(&#39;#btntc&#39;).click(function(){
  
   var html = "<p style=&#39;color:red&#39;>这是测试的弹窗</p>";
   var button ="<input type=&#39;button&#39; value=&#39;确定&#39; /><input type=&#39;button&#39; value=&#39;取消&#39; />";

   var win = new Window({
    
    width : 400, //宽度
    height : 300, //高度
    title : &#39;测试弹窗&#39;, //标题
    content : html, //内容
    isMask : false, //是否遮罩
    buttons : button, //按钮
    isDrag:true, //是否移动
    
    });
  
  })
});
</script>
</html>

De même, des commentaires détaillés sont également ajoutés à la page principale pour faciliter la compréhension future. J'espère que cela pourra m'aider ainsi que tout le monde. Jetons un coup d'oeil à l'effet :

L'effet après avoir cliqué sur la fenêtre pop-up :

Nous pouvons voir que chaque fenêtre contextuelle peut être déplacée et que d'innombrables fenêtres peuvent apparaître. Si le calque de masque est modifié en vrai, la deuxième fenêtre contextuelle n'apparaîtra pas.

N'oubliez pas le côté pratique du calque de masque, qui peut éviter de nombreux bugs. Si vous souhaitez référencer la fenêtre pop-up, vous devez la tester avant de l'utiliser pour éviter des problèmes.

Recommandations associées :

Explication détaillée sur la façon d'ajouter des informations sur les fenêtres contextuelles à la page Web de Dreamweaver

javascript, html5, css3 personnalisé fenêtre pop-up

Utilisation complète et techniques des fenêtres pop-up JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!