How to write pop-up windows in JavaScript

This article shares how to write pop-up windows using JavaScript

Identification of each pop-up window
var x =0;

var idzt = new Array();

var Window = function(config){

ID is not repeated
idzt[x] = "zhuti"+x; Pop-up window ID

Initialization, receiving parameters
this.config = {
width : config.width || 300, width
height : config.height || 200, height
buttons: config.buttons || ' ', no button by default
title : config.title || 'title', title
content : config.content || 'content', content
isMask : config.isMask == false?false:config .isMask || true, whether to mask
isDrag : config.isDrag == false?false:config.isDrag || true, whether to move
};

Load pop-up window
var w = ($(window).width()-this.config.width)/2;
var h = ($(window).height()-this.config.height)/2;

var nr = "

";
$("body ").append(nr);

Load pop-up window title
var content ="

"+this.config.title+"

×

";
Load pop-up content
var nrh = this.config.height - 75;
content = content+"

"+this.config.content+"

";
Load button
content = content+"

"+this.config.buttons+"

";

Add title, content and buttons to the window
$('#'+idzt[x]).html(content);


Create a mask layer
if(this.config.isMask)
{
var zz = "

";
$("body") .append(zz);
$("#zz").css('display','block');
}

Maximum and minimum restrictions to avoid movement Go outside the page
var maxX = $(window).width()-this.config.width;
var maxY = $(window).height()-this.config.height;
var minX = 0,
minY = 0;

Window movement
if(this.config.isDrag)
{
 Mouse movement pop-up window
 $(".title") .bind ("mousedown", function (e) {

var n = $ (this) .attr ("bs"). $(".zhuti").css("
z-index
",3);
        $('#'+idzt[n]).css("z-index",4) ;                                                                                                                                     using var end [n] ).css("left")), the initial X coordinate of the pop-up layer           startY = parseInt($('#'+idzt[n]).css("top")), the initial Y coordinate of the pop-up layer
            downX = e.clientX, when the mouse is pressed, the X coordinate of the mouse
downY = e.clientY; When the mouse is pressed, the Y coordinate of the mouse
es){
                              endX = es.clientX - downX + startX; Maximum and minimum limits if(endX > maxX)
                                                                endX = 0;
}
                                                                                  
                    endY = 0;
            }
                                                                                                                                                                                                                                                                                                      ​ endx+"px");

Window.getSelect? Window.getSelection (). Remove
all
## range s (): DOCUMENT
. Selection .empty(); //Unselect text
                                                                                                                                                            ## ", function () {

$ (" body "). Unbind (" mousemove ");

});
}
#turning off the window

$(".close").click(function(){
           
        var m = this.getAttribute("bs"); Find the identifier
                                                                                                                                                                 (); Remove the pop-up window
}

The above is the detailed content of How to write pop-up windows in JavaScript. For more information, please follow other related articles on the PHP Chinese website!