First of all, I am new to JQuery and Web technologies overall. I have been playing with node.js/expressjs/jade.js and JQuery few weeks so far.
For some reason I just cant get modal dialog work. Following code shows button and button click shows "dialog". This dialog is just div element below button, not over button. On the top of that you cannot move button and style is not same as shown in JQuery example.
http://jqueryui.com/demos/dialog/
Could someone be kind and point the 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 to reference window
$myWindow = jQuery('#myDiv');
//instantiate the dialog
$myWindow.dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Hello World'
//overlay: { opacity: 0.5, background: 'black'}
});
}
);
//function to show dialog
var showDialog = function() {
//if the contents have been hidden with css, you need this
$myWindow.show();
//open the dialog
$myWindow.dialog("open");
}
//function to close dialog, probably called by a button in the 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 am a modal dialog</p>
</div>
</div>
</body>
</html>
working demo http://jsfiddle.net/LPeeC/
Issue was your click event, rest you can play around with the demo,
This should help, :)
code
$(document).ready( function(){
jQuery("#myButton").click(function(e){
showDialog()
e.preventDefault();
});
//variable to reference window
$myWindow = jQuery('#myDiv');
//instantiate the dialog
$myWindow.dialog({ height: 350,
width: 400,
modal: true,
position: 'center',
autoOpen:false,
title:'Hello World'
//overlay: { opacity: 0.5, background: 'black'}
});
}
);
//function to show dialog
var showDialog = function() {
//if the contents have been hidden with css, you need this
$myWindow.show();
//open the dialog
$myWindow.dialog("open");
}
//function to close dialog, probably called by a button in the dialog
var closeDialog = function() {
$myWindow.dialog("close");
}