jQuery对话框具有巨大的标题
|
我在用着：
jQuery 1.6.1
jQuery UI 1.8.13
铬12.0.742.100
IE 7.0.5
FF 4
我创建了一个JQuery UI对话框，在所有3个对话框中看起来都不错。
我继续浏览并制作了更多页面，但是对对话框或css却什么也没做（据我所知，这对JQuery和CSS来说还很新）。然后昨天昨天我所有页面上的每个对话框看起来都像这样（仅在FF和chrome中。IE仍然看起来不错）...
它的标题部分突然很大，我不知道为什么。我一直在使用Firebug在CSS中闲逛，但我无法改变它。
有人有什么好主意吗？
HTML，CSS和JQuery都是非常标准的。我正在使用JQuery-UI站点中的一个预卷主题。
<div id=\"Div1\" title=\"Connections\">
<a href=\"CM.aspx?mode=0\" class=\"jquery-ui-button dialog-link-button\">Add</a>
<a href=\"CMSearch.aspx\" class=\"jquery-ui-button dialog-link-button\">Search/Edit</a>
</div>
/* --------------------------------------------------------------------- */
/* disable the x in the upper-right corner of jquery-ui dialogs */
.ui-dialog-titlebar-close
{
display: none;
}
/* center the user-defined buttons within jquery-ui dialogs */
.dialog-link-button
{
float: none;
width:250px;
display: block;
margin: 10px auto;
}
/* make the buttons in the jquery-ui dialog button pane on the bottom center aligned */
.ui-dialog-buttonpane .ui-dialog-buttonset .ui-button
{
float: none;
display: block;
margin: 10px auto;
}
/* --------------------------------------------------------------------- */
var options = {
autoOpen: false,
modal: true,
open: function(event, ui) {
/* blur the buttons so they aren\'t auto selected */
$(\".dialog-link-button\").blur();
},
resizable: false,
buttons: {
Cancel: function() {
$( this ).dialog( \"close\" );
}
}
};
$(\'#connectionsModal\').dialog(options);
/* --------------------------------------------------------------------- */
没有找到相关结果
已邀请:
2 个回复
屡倒雷图
包裹在中来进行修复。这样，当jQuery创建模态时，它将附加到主体上，并且浮点数将由我们的新div清除。 我确实承认，这是我所见过的最奇怪的效果。 修改后的“ 4”：<!DOCTYPE html> <html xmlns=\"http://www.w3.org/1999/xhtml\"><head><meta http-equiv=\"Content-Type\" content=\"text/html; charset=UTF-8\"><title> </title><link rel=\"stylesheet\" type=\"text/css\" href=\"./test_files/main.css\" media=\"screen\"> <link rel=\"stylesheet\" type=\"text/css\" href=\"./test_files/jquery-ui-1.8.10.custom.css\" media=\"screen\"> <script type=\"text/javascript\" src=\"./test_files/additional-methods.min.js\"></script> <script type=\"text/javascript\" src=\"./test_files/jquery.min.js\"></script> <script type=\"text/javascript\" src=\"./test_files/jquery-ui.min.js\"></script> <link rel=\"stylesheet\" type=\"text/css\" href=\"./test_files/Default.css\" media=\"screen\"> <script type=\"text/javascript\"> </script> <script type=\"text/javascript\"> $(document).ready(function() { /* set up the dialogs */ /* options for the dialogs */ var options = { autoOpen: false, modal: true, open: function(event, ui) { /* blur the buttons so they aren\'t auto selected */ $(\".dialog-link-button\").blur(); /* justify (center) the text in the buttons. Must be done programmaticaly because each text can have a different width */ $(\'.dialog-link-button .ui-button-text\').each(function() { justify(this); }); }, resizable: false, buttons: { Cancel: function() { $(this).dialog(\"close\"); } } }; /* actual dialogs */ $(\'#connectionsModal\').dialog(options); /* set up the buttons */ $(\'.jquery-ui-button\').button(); /* blur the buttons so they don\'t get stuck in focus mode (not sure why they are stupid, just are) */ $(\'.jquery-ui-button\').click(function() { $(this).blur(); }); }); /* function to justify *this* within its parent */ function justify(e) { var parentWidth = $(e).parent().width(); var thisWidth = $(e).width(); var padLeft = (parentWidth / 2 - thisWidth / 2) + \'px\'; $(e).css(\'padding-left\', padLeft); } </script> <style type=\"text/css\"> .jstree ul, .jstree li { display:block; margin:0 0 0 0; padding:0 0 0 0; list-style-type:none; } .jstree li { display:block; min-height:18px; line-height:18px; white-space:nowrap; margin-left:18px; } .jstree-rtl li { margin-left:0; margin-right:18px; } .jstree > ul > li { margin-left:0px; } .jstree-rtl > ul > li { margin-right:0px; } .jstree ins { display:inline-block; text-decoration:none; width:18px; height:18px; margin:0 0 0 0; padding:0; } .jstree a { display:inline-block; line-height:16px; height:16px; color:black; white-space:nowrap; text-decoration:none; padding:1px 2px; margin:0; } .jstree a:focus { outline: none; } .jstree a > ins { height:16px; width:16px; } .jstree a > .jstree-icon { margin-right:3px; } .jstree-rtl a > .jstree-icon { margin-left:3px; margin-right:0; } li.jstree-open > ul { display:block; } li.jstree-closed > ul { display:none; } </style> <style type=\"text/css\"> #vakata-dragged { display:block; margin:0 0 0 0; padding:4px 4px 4px 24px; position:absolute; top:-2000px; line-height:16px; z-index:10000; } </style> <style type=\"text/css\">#vakata-dragged ins { display:block; text-decoration:none; width:16px; height:16px; margin:0 0 0 0; padding:0; position:absolute; top:4px; left:4px; } #vakata-dragged .jstree-ok { background:green; } #vakata-dragged .jstree-invalid { background:red; } #jstree-marker { padding:0; margin:0; line-height:12px; font-size:1px; overflow:hidden; height:12px; width:8px; position:absolute; top:-30px; z-index:10000; background-repeat:no-repeat; display:none; background-color:silver; } </style> <style type=\"text/css\">#vakata-contextmenu { display:none; position:absolute; margin:0; padding:0; min-width:180px; background:#ebebeb; border:1px solid silver; z-index:10000; *width:180px; } #vakata-contextmenu ul { min-width:180px; *width:180px; } #vakata-contextmenu ul, #vakata-contextmenu li { margin:0; padding:0; list-style-type:none; display:block; } #vakata-contextmenu li { line-height:20px; min-height:20px; position:relative; padding:0px; } #vakata-contextmenu li a { padding:1px 6px; line-height:17px; display:block; text-decoration:none; margin:1px 1px 0 1px; } #vakata-contextmenu li ins { float:left; width:16px; height:16px; text-decoration:none; margin-right:2px; } #vakata-contextmenu li a:hover, #vakata-contextmenu li.vakata-hover > a { background:gray; color:white; } #vakata-contextmenu li ul { display:none; position:absolute; top:-2px; left:100%; background:#ebebeb; border:1px solid gray; } #vakata-contextmenu .right { right:100%; left:auto; } #vakata-contextmenu .bottom { bottom:-1px; top:auto; } #vakata-contextmenu li.vakata-separator { min-height:0; height:1px; line-height:1px; font-size:1px; overflow:hidden; margin:0 2px; background:silver; /* border-top:1px solid #fefefe; */ padding:0; } </style> <style type=\"text/css\">.jstree .ui-icon { overflow:visible; } .jstree a { padding:0 2px; } </style></head> <body> <div id=\"head\"></div> <div id=\'content\' class=\'ui-helper-clearfix\'> <form name=\"aspnetForm\" method=\"post\" action=\"./test_files/test.htm\" id=\"aspnetForm\"> <div> <input type=\"hidden\" name=\"__VIEWSTATE\" id=\"__VIEWSTATE\" value=\"/wEPDwULLTE2NTczNTE4NjAPZBYCZg9kFgICAw9kFgICAQ9kFgYCBQ8WAh4LXyFJdGVtQ291bnQCBRYKAgEPZBYCZg8VBAI2Mw1URVNUX0ZBQ0lMSVRZAyA6IAZhd2VmYXdkAgIPZBYCZg8VBAI2Mg1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXN0ZAIDD2QWAmYPFQQCNjENVEVTVF9GQUNJTElUWQMgOiAEdGV3dGQCBA9kFgJmDxUEAjYwDVRFU1RfRkFDSUxJVFkDIDogBHRlc3RkAgUPZBYCZg8VBAI1OQ1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXd0ZAIGDxYCHwACBRYKAgEPZBYCZg8VBAI2Mw1URVNUX0ZBQ0lMSVRZAyA6IAZhd2VmYXdkAgIPZBYCZg8VBAI1Nw1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXN0ZAIDD2QWAmYPFQQCNjINVEVTVF9GQUNJTElUWQMgOiAEdGVzdGQCBA9kFgJmDxUEAjU4DVRFU1RfRkFDSUxJVFkDIDogBHRlc3RkAgUPZBYCZg8VBAI2MQ1URVNUX0ZBQ0lMSVRZAyA6IAR0ZXd0ZAIHDxYCHwBmZGQolRp/M4dzIRG65MxM4hACjSHkZw==\"> </div> <div style=\"margin:45px 50px 10px 15px;\"> <input type=\"button\" id=\"connectionButton\" value=\"Connections\" class=\"bigButton jquery-ui-button ui-button ui-widget ui-state-default ui-corner-all\" onclick=\"$('#connectionsModal').dialog('open'); return false;\" role=\"button\"> <br><br><br> <div id=\"lastInsertedTable\" class=\"repeater ui-helper-clearfix\"> <span>Recently Added</span> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> <span style=\"float:left;width:100%;height:1px;\"></span> </div> </form> </div> <div style=\"outline-width: 0px; outline-style: initial; outline-color: initial; width: 300px; top: -13px; left: 489px; height: auto; position: relative; z-index: 1002; display: none; \" class=\"ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable\" tabindex=\"-1\" role=\"dialog\" aria-labelledby=\"ui-dialog-title-connectionsModal\"><div class=\"ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix\"><span class=\"ui-dialog-title\" id=\"ui-dialog-title-connectionsModal\">Connections</span><a href=\"#\" class=\"ui-dialog-titlebar-close ui-corner-all\" role=\"button\"><span class=\"ui-icon ui-icon-closethick\">close</span></a></div> <div id=\"connectionsModal\" class=\"m_dialog ui-dialog-content ui-widget-content\" style=\"min-height: 80px; width: auto; height: auto; \"> <a href=\"#\" class=\"jquery-ui-button dialog-link-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only\" role=\"button\"><span class=\"ui-button-text\" style=\"padding-left: 109.5px; \">Add</span></a> <a href=\"#\" class=\"jquery-ui-button dialog-link-button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only\" role=\"button\"><span class=\"ui-button-text\" style=\"padding-left: 81px; \">Search/Edit</span></a> </div> <div class=\"ui-dialog-buttonpane ui-widget-content ui-helper-clearfix\"><div class=\"ui-dialog-buttonset\"><button type=\"button\" class=\"ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only\" role=\"button\"><span class=\"ui-button-text\">Cancel</span></button> </div> </div> </div> </body> </html>粟痢凰副
.ui-dialog { clear: both; }