Menu
Searching all over for the keywords "simple jquery dialog example" - with all the answers out there, I have not seen any simple and meaningful example in a succinct standalone .html document . Even downloading several full books on jQuery, I didn't see any such an example.
The examples I did find are for a dialog that shows an alert message "Hello World" .. not very useful for interaction. I think the real world example would be something that captures input and sends it back to the page without requiring to post back to the server. The server post can be a subsequent step.
Can anyone recommend a code reference along these lines? Thanks
EDIT #3
I have pasted in a solution with a fresh post below. It is a completely self-contained file, with ready-to-go includes. It's working for me.
EDIT #2
I updated the head block to contain the missing css. The dialog content is now not being shown, but still the dialog box is not opening .. and no errors in console.
<style>
#dialog {
display:none;
}
</style>
EDIT ~ ATTEMPT #1
Based on the answer from @rob-schmuecker , I tried the following code below. I see it work on jsFiddle, but my implementation is not working. In my browser the console doesn't show any errors. But there are two problems I'm seeing:
Any idea what is wrong with this code? .. is it perhaps my jquery include calls?
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
//Initialize dialog
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
//Open it when #opener is clicked
$("#opener").click(function () {
$("#dialog").dialog("open");
});
//When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
$('.formSaver').on('click', function () {
$('.myTarget').text($('.myInput').val());
$("#dialog").dialog('close');
});
</script>
<style>
#dialog {
display:none;
}
</style>
</head>
<body>
<div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<input class="myInput" type="text" />
<button class="formSaver">Save me!</button>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>
524
#hanlet-escaño, #robert-rozas, #rob-schmuecker - all of those are good examples and I like seeing the various ways it can be approached .. thanks very much! And knowing code examples for these type of questions can be found directly on the jqueryui.com site is very helpful.
The basic dialog window is an overlay positioned within the viewport and is protected from page content (like select elements) shining through with an iframe. It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default. <p>This is the default dialog which is useful for displaying information.
jQuery UI Dialog - Default functionality. Basic dialog. This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
It has a title bar and a content area, and can be moved, resized and closed with the 'x' icon by default. < p > This is the default dialog which is useful for displaying information.
OK Here goes
Demo:http://jsfiddle.net/robschmuecker/9z2ag/1/
HTML:
<div>Here is the rest of the page. Hopefully we can get the value from the dialog form?! Should display <span class="myTarget">here</span> when finished.</div>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
<input class="myInput" type="text" />
<button class="formSaver">Save me!</button>
</div>
<button id="opener">Open Dialog</button>
Dialog starts off hidden with CSS:
#dialog {
display:none;
}
Then we do some Javascript:
//Initialize dialog
$("#dialog").dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
//Open it when #opener is clicked
$("#opener").click(function () {
$("#dialog").dialog("open");
});
//When the button in the form is clicked, take the input value and set that as the value of `.myTarget`
$('.formSaver').on('click', function () {
$('.myTarget').text($('.myInput').val());
$("#dialog").dialog('close');
});
The reason it isn't working is because your calls to jQuery and jQuery UI are like this:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
But the URL to load it from is:
https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
Put in the correct URL and it will work.
ADDITION:
The problem is in your second call to jQuery:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js
Besides for the fact that the jQuery is loaded from https, there is no jquery.js, it is jquery.min.js.
37
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
