You are not logged in.
Pages: 1
Hey guys,
I have two problems that need to be solved:
1. I added a click handler to a div, once clicked it should display a dialog box (using jQuery UI). That works fine, but it only works ONCE. If I click the same div after I've closed the dialog box, nothing happens.
2. The dialog box does not display the way it should... Here's how it looks:
But look at the CSS:
.ui-dialog { position: absolute; overflow: hidden; width:600px; height:450px; padding:10px; background-color:#2c3e56; }
/*.ui-dialog .ui-dialog-titlebar { padding: .5em 1em .3em; position: relative; }*/
.contact .ui-dialog-title { float: left; margin: .1em 16px .2em 0; }
.contact .ui-dialog-titlebar-close { position: absolute; right: .3em; bottom: 3%; width: 19px; margin: 0; padding: 1px; height: 18px; }
.contact .ui-dialog-titlebar-close span { display: block; margin: 1px; }
.contact .ui-dialog-titlebar-close:hover, .ui-dialog .ui-dialog-titlebar-close:focus { padding: 0; }
.contact .ui-dialog-content { position: relative; border: 0; padding: .5em 1em; background: none; overflow: auto; zoom: 1; }
.contact .ui-dialog-buttonpane { text-align: left; border-width: 1px 0 0 0; background-image: none; margin: .5em 0 0 0; padding: .3em 1em .5em .4em; }
.contact .ui-dialog-buttonpane .ui-dialog-buttonset { float: right; }
.contact .ui-dialog-buttonpane button { margin: .5em .4em .5em 0; cursor: pointer; }
.contact .ui-resizable-se { width: 14px; height: 14px; right: 3px; bottom: 3px; }
.ui-draggable .ui-dialog-titlebar { cursor: move; }
.contact textarea {
width:100%;
height:400px;
font-family:"Century Gothic", serif;
font-size:14px;
color:#2c3e56;
}
//HTML Code:
<div id="dialog1" class="contact" title=""> </div>
//Javascript Code:
$(function() {
scrollAds();
$("#tabs").tabs();
var contact = "<form action=\"includes/send.php\" method=\"post\"><textarea> </textarea><input type=\"submit\" class=\"formButton\" id=\"contactSend\" name=\"contactSend\" value=\"SEND\" /><input type=\"reset\" class=\"formButton\" id=\"contactReset\" name=\"contactReset\" value=\"RESET\" /></form>";
$("#contactBtn").click(function(e) {
$("#dialog1").html(contact);
$("#dialog1").dialog({modal: false, width: 300, draggable: true, dialogClass: "contact"});
e.preventDefault();
})
});
So any suggestions?
UPDATE: Second Problem has been sorted out. But still haven't found a solution to the first one. And it's not the first time I encounter a similar problem. Why does this happen? How can I solve it?
Thank you.
Last edited by Kassem (January 4 2011)
How are you closing it?
From the jQueryUI documentation:
A call to
$(foo).dialog()
will initialize a dialog instance and will auto-open the dialog by default. If you want to reuse a dialog, the easiest way is to disable the "auto-open" option with:
$(foo).dialog({ autoOpen: false })
and open it with
$(foo).dialog('open')
. To close it, use
$(foo).dialog('close')
Sounds like thats what you need to be doing...
Last edited by vic (January 4 2011)
@vic: Thanks a lot man. That is exactly what I needed to do :)
Pages: 1