Hi,
I wish to use a jQueryUI dialog without a title bar, so I hid it when it was opened. See here for an example. You will notice that #dialog is 159.033px high. Then close the dialog, and open it again, and it is now 40px higher (i.e. 200.033px high).
Does anyone know why the height changes, and how to prevent it to change? Thank you
HTML Code:<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Dialogs</title> <!-- <style type="text/css">.hide-title-bar .ui-dialog-titlebar { display: none; }</style> --> <link type="text/css" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/smoothness/jquery-ui.css" rel="stylesheet" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" language="javascript"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js" language="javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $(".openDialog").click(function(){$("#dialog").dialog("open");}); $("#dialog").dialog({ autoOpen: false, resizable : false, height : 300, width : 440, modal : true, dialogClass : 'hide-title-bar', open: function() {$(this).dialog("widget").find(".ui-dialog-titlebar").hide();}, buttons : [{text:'CANCEL',click: function() {$(this).dialog("close");}}] }); }); </script> </head> <body> <input type="button" value="ClickMe" class="openDialog" /> <div id="dialog"></div> </body> </html>
Reply With Quote
Bookmarks