dez
12
2011
jQuery

Modal com jQuery – Simple Modal

Author An article by Marcelo Andrade    Comments 2 Comments
Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina.

SimpleModal é um plugin jQuery para abrir janelas do tipo modal. Pode ser usado para gerar um alerta ou para fazer janelas de confirmações com muito pouca linha de código.

Como usar? 

É muito simples, bastam poucas linhas de código para utilizar o SimpleModal, veja:

 

Para fazer uma janela de alerta

1
2
3
4
5
6
7
$("myElement").addEvent("click", function(){
var SM = new SimpleModal({"btn_ok":"Alert button"});
SM.show({
"title":"Title",
"contents":"Your message..."
});
});

 

Para fazer uma janela modal

1
2
3
4
5
6
7
8
9
10
11
12
13
$("myElement").addEvent("click", function(){
var SM = new SimpleModal({"btn_ok":"Confirm button"});
SM.addButton("Action button", "btn primary", function(){
alert("Add your code");
this.hide();
});
SM.addButton("Cancel", "btn");
SM.show({
"model":"modal",
"title":"Title",
"contents":"Your message..."
});
});

 

Para fazer uma janela AJAX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("myElement").addEvent("click", function(){
var SM = new SimpleModal({"width":600});
SM.addButton("Action button", "btn primary", function(){
this.hide();
});
SM.addButton("Cancel", "btn");
SM.show({
"model":"modal-ajax",
"title":"Title",
"param":{
"url":"ajax-content.php",
"onRequestComplete": function(){ /* Action on request complete */ }
}
});
});

 

Para fazer um Modal com Imagens

1
2
3
4
5
6
7
8
9
10
11
$("myElement").addEvent("click", function(){
var SM = new SimpleModal();
SM.show({
"model":"modal-ajax",
"title":"Image title",
"param":{
"url":"http://url-file.jpg",
"onRequestComplete": function(){ }
}
});
});

 

Para dar uma olhada em alguns exemplos visite esta página: http://simplemodal.plasm.it/#examples 

O download do SimpleModal pode ser feito através deste link: https://github.com/plasm/simplemodal/zipball/master

Até a próxima pessoal.

Tags:,

Related Posts

About the Author: Marcelo Andrade

2 Comments + Add Comment

Leave a comment

Lomadee, uma nova espécie na web. A maior plataforma de afiliados da América Latina.