用JavaScript寫彈跳視窗的方法

這篇文章分享用JavaScript寫彈跳窗的方法

每個彈窗的標識
var x =0;

var idzt = new Array();

var Window = function(config){
 

var Window = function(config){
 

var Window = function(config){
    y =   🠎 "+x;  彈窗ID  
  初始化，接收參數   this.config = {      
width
: config.width || 300,
width
: config.width || 300,
width
: config.width ||
     buttons : config. buttons || '', 預設無按鈕
     title : config.title || '標題', 標題
     content : config.content || '內容', 內容
   isask : || '內容', 內容
|| true, 是否遮罩
     isDrag : config.isDrag == false?false:config.isDrag || true, 是否移動      }; || dow this.config.width)/2;
  var h = ($(window).height()-this.config.height)/2;     var nr = "

";
  $("body").app
end
(nr);
 
  載入彈跳視窗標題
  var content ="

"+this.config.title+"

×

";
  載彈窗內容
  var nrh = this.config.height - 75;
  content = content+"

"+this.config.content+"

";
  載入按鈕
  content = content+"

"+this.config.buttons+"

";
 
  將標題、內容及按鈕加入視窗   $('#'+idzt[x]).html(content);  
 
  建立遮罩層
 
if(this.config.isMask)  
if >";
     $("body").append(zz);
     $("#zz").css('
display
','block');
  }
display
','block');
  }
display
','block');
  }
  }
 以免移到頁外
  var maxX = $(window).width()-this.config.width;
  var maxY = $(window).height()-this.config.height;
  var minX = 0,
minY = 0;     視窗移動
  if(this.config.isDrag)
  {
     滑鼠移動彈出視窗
    $(".title").b(   
           var n = $ 。           $('#'+ idzt[n]).css("z-index",4);
           
           取初始座標
               endY = 0, 移動後Y座標
              startX = parseInt($('# '+idzt[n]).css("left")), 彈出層的初始X座標🎜               startY = parseInt($('#'+idzt[n]).css("top")), 彈出層的初始Y座標🎜               downX = e.clientX, 滑鼠按下時，滑鼠的X座標🎜downY = e.clientY; 滑鼠按下時，滑鼠的Y座標
             
            es){                             endX = es.clientX - downX + startX; X座標移動
              endY = es.clientY - downY + startY; Y座標移動
                   if(endX > maxX)
              {
          
if(endX               {
                 endX = 0;
              }
              if(endY > maxY)
              {                  endY = maxY;               } else if(endY               {
                 endY = 0;
              }
             
              $('#' +idzt[n]).css("top",endY+"px");
              $('#'+idzt[n]).css("left",endX+"px");      window.getSelection ? window.getSelection().remove
All

Range
s():
document
.selection.empty(); //取消選取文字
              });
     滑鼠按鍵抬起，釋放移動事件
     $("body").bind("mouseup",function(){                    $("body").unbind(" em       $("body").unbind(" em     });   }     關閉視窗   $(". close").click(function(){
     
        var m = this.getAttribute("bs"); 找標識
        $('#'+idzt[m]).remove(); 移除彈窗
        $( '#zz').remove(); 移除遮罩
     
     })
     
     x++;

以上是用JavaScript寫彈跳視窗的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！