Javascript: call dialog from button -
i hope can me, because i'm new @ javascript. want open dialog clicking on button. when shows , click "ok", there should pop-up second dialog.
http://forums.asp.net/t/1962249.aspx?make+a+button+open+a+javascript+dialog
and on stackoverflow saw related questions. none of them answer question: wrong or should make work?
my code is:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>jquery ui dialog - default functionality</title> <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"> <script src="//code.jquery.com/jquery-1.10.2.js"></script> <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> <link rel="stylesheet" href="/resources/demos/style.css"> <script> $(function() { $( "#dialog" ).dialog( { autoopen:false, maxheight: 250, maxwidth: 600, buttons: [ { text: "ok", icons: { primary: "ui-icon-check"}, click: function() { $( ).dialog( "close" ); $("#dialog2").dialog("open"); } }, { text: "cancel", icons: { primary: "ui-icon-close"}, click: function() { $( ).dialog( "close" ); } } ] }); $( "#dialog2" ).dialog( { autoopen: false, maxheight: 400, maxwidth: 600, buttons: [ { text: "ok", icons: { primary: "ui-icon-check"}, click: function() { $( ).dialog( "close" ); $("#dialog3").dialog("open"); } }, { text: "cancel", icons: { primary: "ui-icon-close"}, click: function() { $( ).dialog( "close" ); } } ] }); $( "#dialog3" ).dialog( { autoopen: false, maxheight: 400, maxwidth: 600, buttons: [ { text: "ok", icons: { primary: "ui-icon-check"}, click: function() { $( ).dialog( "close" ); $("#dialog3").dialog("open"); } }, { text: "cancel", icons: { primary: "ui-icon-close"}, click: function() { $( ).dialog( "close" ); } } ] }); }); $function myfunction(){ $( "#btn1" ).click(function() { $("#dialog").dialog("open"); } } </script> </head> <body> <div id="dialog" title="basic dialog"> <p>tekst</p> </div> <div id="dialog2" title="basic dialog"> <p>tekst</p> </div> <div id="dialog3" title="basic dialog"> <p>test.</p> </div> <button id="btn1" onclick="myfunction()" class="ui-state-default ui-corner-all">click here</button> </body> </html>
just register click
handler this:
$( "#btn1" ).click(function() { $("#dialog").dialog("open"); });
inside domready
function creating dialogs.
and remove part:
$function myfunction(){ $( "#btn1" ).click(function() { $("#dialog").dialog("open"); } }
and in input
element remove onclick
attribute.
<button id="btn1" class="ui-state-default ui-corner-all">click here</button>
you have same each button/dialog combination.
see demo
Comments
Post a Comment