Maison > interface Web > js tutoriel > le corps du texte

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

高洛峰
Libérer: 2017-03-12 11:54:56
original
2145 Les gens l'ont consulté

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!