jQuery UI Alert Dialog as a replacement for alert() jquery alert (modal)모달 다이얼로그 관련

 

///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

 

출처: http://stackoverflow.com/questions/8079674/jquery-ui-alert-dialog-as-a-replacement-for-alert

 

I'm using alert() to output my validation errors back to the user as my design does not make provision for anything else, but I would rather use jQuery UI dialog as the alert dialog box for my message. Since errors are not contained in a (html) div, I am not sure how to go about doing this. Normally you would assign the dialog() to a div say $("#divName").dialog() but I more need a js function something like alert_dialog("Custom message here") or something similiar. Any ideas? jquery jquery-ui jquery-ui-dialog alert alertdialog

add comment

5 Answers

activeoldestvotes

up vote9down voteaccepted	I don't think you even need to attach it to the DOM, this seems to work for me: Here's a JS fiddle: http://jsfiddle.net/TpTNL/98
add comment

up vote7down vote	Using some of the info in here I ended up creating my own function to use. Could be used as... jQuery UI Alert Replacement
add comment

up vote2down vote	Just throw an empty, hidden div onto your html page and give it an ID. Then you can use that for your jQuery UI dialog. You can populate the text just like you normally would with any jquery call.
add comment

up vote1down vote	DAlert jQuery UI Plugin Check this out, This may help you
add comment

up vote0down vote

$("").html("YOUR MESSAGE").dialog(); this works but it append a node to the DOM. You can use a class and then or first remove all elements with that class. ex:

 

 

 

//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

 

 

출처: http://simplemodal.plasm.it/#download

 

 

 

HOW TO USE

SIMPLEMODAL is very simple to use; here are 4 ways to create SIMPLEMODAL: simple alert message, modal window, modal window with a single asynchronous call and lightbox.

ALERT INTEGRATION

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..."       }); });

MODAL INTEGRATION

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..."       }); });

MODAL-AJAX INTEGRATION

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 */ }         }       }); });

MODAL-IMAGE

 

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(){ }         }       }); });

 

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////