Comment écrire des fenêtres pop-up en JavaScript

Cet article explique comment écrire des fenêtres contextuelles en utilisant JavaScript

Identification de chaque fenêtre pop-up
var x =0;

var idzt = nouveau Array();

var Window = function(config){

L'ID n'est pas répété
idzt[x] = "zhuti" x; ID de la fenêtre contextuelle

Initialisation, réception des paramètres
this .config = {
largeur : config.width || 300, largeur
hauteur : config.height || 200, hauteur
boutons : config.buttons || '' , pas de bouton par défaut
title : config.title || 'title', title
content : config.content || 'content', content
isMask : config.isMask == false ?false:config. isMask || true, s'il faut masquer
isDrag : config.isDrag == false?false:config.isDrag || true, s'il faut déplacer
};

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

var nr = "

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

Charger le titre de la fenêtre pop-up
var content ="

" this.config.title "

×

";
Chargement de la fenêtre contextuelle Contenu
var nrh = this.config.height - 75;
content = content "

" this.config.content "

";
Bouton de chargement
content = content "

Créer un calque de masque

if
(this.config.isMask)
{ var zz = "

"; $("body").append(zz);
$("#zz").css('
display
','block');
} Restrictions maximales et minimales pour éviter de sortir de la page
var maxX = $(window).width()-this.config .width;
var maxY = $(window).height()-this.config.height;
var minX = 0,
minY = 0;

Mouvement de la fenêtre
if(this.config.isDrag)
{
Fenêtre contextuelle de mouvement de la souris
$(".title").bind( "mousedown", fonction(e){
                                                                                                                                                                                                      $(this).attr("bs"); Obtenir l'identifiant
                                                                                                                                 ,3);
$('#' idzt[n]).css( "z-index",4);

                                                                                                                                                                                                                                                                      $('#' idzt[n]).css("top")), la coordonnée Y initiale du calque contextuel
downX = e .clientX, lorsque la souris est enfoncée, la coordonnée X de la souris
double = e.clienty; Lorsque la souris est enfoncée, la coordonnée Y de la souris

Lie la souris pour se déplacer Incident
$ ("corps") ES) {<.>
ENDX = ES.Clientx -DOWNX Startx ; mouvement des coordonnées X
Endy = ES.Clienty -DOWNY Starty ; endX)
                                   {
               endX = 0;
             }

;
; (); Supprimer le masque
                                                                                                                                                                            🎜>

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!