Tutorialdock | Free Web Resources

Creare un modal in JQuery

| di:

jquery questions indeas Creare un modal in JQuery
JQuery ci permette di fare molto scrivendo meno (“write less,do more” il motto di JQuery). Oggi voglio spiegarvi come si può creare un modal in JQuery e, nel prossimo articolo, vi spiegherò come lo si può trasformare in un plugin JQuery.

L’idea

Un modal non è altro che una finestrella che appare davanti al resto del documento per dare un messaggio, ma anche per obbligare a fare una scelta o per inserirvi una pubblicità.

Dobbiamo quindi generare un contenitore all’interno del quale inserire il contenuto, altrimenti che contenitore è?

Per fare ciò, duplicheremo il contenuto di un div che avremo reso invisibile grazie al CSS e lo mostreremo all’interno del modal.

Ma passiamo alla pratica.

Il codice

Innanzitutto creiamo una pagina in formato HTML e una in formato js, che io ho chiamato index.html e modal.js, con molta fantasia.

Index.html

All’interno di index.html inseriamo i tag principali dell’html e, all’interno di <head></head> inseriamo il link a JQuery che, per comodità, sarà direttamente alla versione online:

<script src="http://code.jquery.com/jquery-1.6.2.js"></script>

Poi abbiamo bisogno di un po’ di css, così da far sparire il div dove metteremo le informazioni che vogliamo appaiano nel modal.

In index.html aggiungiamo un link e un div con del contenuto:

<a data-tdmodal-id="mymodal">LKink</a>

<div id="mymodal" class="tdmodal">Cotenuto<input type="text" /></div>

Ho utilizzato l’attributo arbitrario “data-” dell’HTML5 per non disturbare l’utilizzo di un id per dare stile all’elemento.

La mia index.html è così:

<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
<style>
.open-modal{
position:absolute;
background-color:#fff;
border: 1px solid #ccc;
box-shadow: 0 1px 5px #ccc;
-moz-box-shadow: 0 1px 5px #ccc;
-o-box-shadow: 0 1px 5px #ccc;
-webkit-box-shadow: 0 1px 5px #ccc;
padding:20px;
}
.tdmodal{
display:none;
}
</style>
</head>
<body>
<a id="miomodal" data-tdmodal-id="mymodal">LKink</a>
<div id="mymodal" class="tdmodal">Cotenuto<input type="text" /><div class="close">Close</div></div>
<script src="modal.js"></script>
</body>
</html>

Ho aggiunto dello stile al modal che poi apparirà e a cui attribuirò la class open-modal.

modal.js

Per quanto riguarda il file modal.js, consiste in una serie di funzioni che rendono possibile la creazione e il posizionamento del modal. Potrei dilungarmi molto con la spiegazione, ma il codice è molto semplice:

var modalid;
var open_space='<div class="open-space" style="width:100%;height:100%;background-color:rgba(255,255,255,0.3);position:fixed;margin:0;padding:0;z-index:99999;top:0px;left:0px;right:0px;bottom:0px"></div>';

In una variabile è stato impostato il div “.open-space” che consiste nello sfondo bianco che verrà dato al documento.

var tdmodal = function(){
		contenuto=$('#'+modalid).html();
		$('body').append(open_space);
		$('.open-space').html('
'+contenuto+'
'); positions($('.open-space #open-'+modalid)); $('.open-space:not(.open-modal)').live('click',function(e){ e.preventDefault(); if($(e.target).hasClass('open-modal')||$(e.target).parents().hasClass('open-modal')){}else{ closem(); } }); $('.open-modal .close').live('click',function(){ closem(); }); };

Poi, nella variabile tdmodal, viene creato un div con lo stesso contenuto del div con l’id che corrisponde al data-tdmodal-id del nostro link e lo si posiziona al centro della pagina attraverso la funzione racchiusa in positions. Ho aggiunto che, al click fuori dal div il modal chiuda e che anche al click su un pulsante con la class close, chiuda il modal.

$('a[data-tdmodal-id]').click(function(){
	modalid = $(this).attr('data-tdmodal-id');
	tdmodal();
});

Poi ho fatto i modo che il tutto fosse attivo per i link con l’attributo data-tdmodal-id.
Tutto il file modal.js è questo:

var modalid;
var open_space='<div class="open-space" style="width:100%;height:100%;background-color:rgba(255,255,255,0.3);position:fixed;margin:0;padding:0;z-index:99999;top:0px;left:0px;right:0px;bottom:0px"></div>';

$('a[data-tdmodal-id]').click(function(){
	modalid = $(this).attr('data-tdmodal-id');
	tdmodal();
});
var positions = function(element) {
			element.css("top", ( $(window).height() - element.outerHeight() ) / 2 + $(window).scrollTop() + "px");
			element.css("left", ( $(window).width() - element.outerWidth() ) / 2 + $(window).scrollLeft() + "px");
};
var closem = function(){
	$('.open-space').remove();
};
var tdmodal = function(){
		contenuto=$('#'+modalid).html();
		$('body').append(open_space);
		$('.open-space').html('
'+contenuto+'
'); positions($('.open-space #open-'+modalid)); $('.open-space:not(.open-modal)').live('click',function(e){ e.preventDefault(); if($(e.target).hasClass('open-modal')||$(e.target).parents().hasClass('open-modal')){}else{ closem(); } }); $('.open-modal .close').live('click',function(){ closem(); }); };
download button3 Creare un modal in JQuery

Tags:


L'Autore

Co-fondatore ha realizzato personalmente il codice su cui si basa Tutorialdock. Ora si occupa di programmazione scrivendo articoli nella categoria tutorial. Sito web dell'autore

Tips: abilitare Airdrop sui mac non supportati ufficialmente