Why is my attempt to use a jQuery UI Dialog failing (not initially hidden, remains glued to the bottom of the page)?
Using the idea
here as a "proof-of-concept" before replacing the html with my own, I added that html to my Index.cshtml file (ASP.NET MVC app):
-
<div id="dialog-message" title="Important information">
<span class="ui-state-default"><span class="ui-icon ui-icon-info" style="float:left; margin:0 7px 0 0;"></span></span>
<div style="margin-left: 23px;">
<p>
We're closed during the winter holiday from 21st of December, 2010 until 10th of January 2011.
<br /><br />
Our hotel will reopen at 11th of January 2011.<br /><br />
Another line which demonstrates the auto height adjustment of the dialog component.
</p>
</div>
</div>
...and this jQuery in the Scripts section of that file to open that div (the previous plain-vanilla alert is shown commented out):
-
$("#btnAddlEmail").click(function () {
//{
// alert(email);
//}
$("#dialog-message").dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"I've read and understand this": function () {
$(this).dialog("close");
}
}
});
}); // $("#btnAddlEmail").click(function ()
BTW, the button whose click is being handled is:
-
<div class="row">
<div class="col-md-1">
</div>
<div class="col-md-11">
<button class="btn pseudobtn darkgreentext" id="btnAddlEmail">+ Add Another Email</button>
</div>
</div>
However, there are two problems:
First, the "dialog" html I've added is not hidden - it displays at the bottom of the page. How can I hide it until the button is clicked?
Second, when I click #btnAddlEmail, it doesn't open a dialog next to the button, which is what I would hope, but simply "focuses" that div by paging down to it. How can I get that div to act like a dialog?
Note: I have done (presumably, anyway) what is necessary to make jQuery UI work in my project, following the steps
here as discussed
here.
Here is a scream shot of what it looks like ("+ Add Another Email" is what I click to show the dialog, which is laying lazily at the bottom):