JQuery Modal Dialog does not behave as in example -


first of all, new jquery , web technologies overall. have been playing node.js/expressjs/jade.js , jquery few weeks far.

for reason cant modal dialog work. following code shows button , button click shows "dialog". dialog div element below button, not on button. on top of cannot move button , style not same shown in jquery example.

http://jqueryui.com/demos/dialog/

could kind , point problem or copy-paste working example. thanks.

<html> <head> <title>places server</title> <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.21/themes/base/jquery-ui.css" type="text/css" media="all"/> <link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all"/> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> <script> jquery(document).ready( function(){ jquery("#mybutton").click( showdialog ); //variable reference window $mywindow = jquery('#mydiv'); //instantiate dialog $mywindow.dialog({ height: 350, width: 400, modal: true, position: 'center', autoopen:false, title:'hello world' //overlay: { opacity: 0.5, background: 'black'} }); } ); //function show dialog var showdialog = function() { //if contents have been hidden css, need $mywindow.show(); //open dialog $mywindow.dialog("open"); } //function close dialog, called button in dialog var closedialog = function() { $mywindow.dialog("close"); } </script> </head> <body> <input id="mybutton" name="mybutton" value="click me" type="button"/> <div id="mydiv" style="display:none" class="ui-dialog ui-widget ui-widget-content ui-corner-all undefined ui-draggable ui-resizable"> <div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix"><span id="ui-dialog-title-dialog" class="ui-dialog-title">dialog title</span></div> <div id="dialog" class="ui-dialog-content ui-widget-content"> <p>i modal dialog</p> </div> </div> </body> </html> 

working demo http://jsfiddle.net/lpeec/

issue click event, rest can play around demo,

this should help, :)

code

$(document).ready( function(){ jquery("#mybutton").click(function(e){ showdialog() e.preventdefault(); }); //variable reference window $mywindow = jquery('#mydiv'); //instantiate dialog $mywindow.dialog({ height: 350, width: 400, modal: true, position: 'center', autoopen:false, title:'hello world' //overlay: { opacity: 0.5, background: 'black'} }); } ); //function show dialog var showdialog = function() { //if contents have been hidden css, need $mywindow.show(); //open dialog $mywindow.dialog("open"); } //function close dialog, called button in dialog var closedialog = function() { $mywindow.dialog("close"); } รข€‹ 

Comments

Popular posts from this blog

javascript - backbone.js Collection.add() doesn't `construct` (`initialize`) an object -

php - Get uncommon values from two or more arrays -

Adding duplicate array rows in Php -