JQuery对话框有巨大的标题
我正在使用:JQuery对话框有巨大的标题,jquery,css,jquery-ui-dialog,Jquery,Css,Jquery Ui Dialog,我正在使用: 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中四处搜索,但我无法让它
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都是非常标准的。我正在使用jQueryUI站点中的一个预滚动主题
<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);
/* --------------------------------------------------------------------- */
/* --------------------------------------------------------------------- */
/*禁用jquery ui对话框右上角的x*/
.ui对话框标题栏关闭
{
显示:无;
}
/*将用户定义的按钮置于jquery ui对话框的中心*/
.对话框链接按钮
{
浮动:无;
宽度:250px;
显示:块;
利润率:10px自动;
}
/*使jquery ui对话框按钮窗格中位于底部中间的按钮对齐*/
.ui对话框按钮平面.ui对话框按钮设置.ui按钮
{
浮动:无;
显示:块;
利润率:10px自动;
}
/* --------------------------------------------------------------------- */
变量选项={
自动打开:错误,
莫代尔:是的,
打开:功能(事件、用户界面){
/*模糊按钮,使其不被自动选择*/
$(“.dialog链接按钮”).blur();
},
可调整大小:false,
按钮:{
取消:函数(){
$(此).dialog(“关闭”);
}
}
};
$(“#连接模式”)。对话框(选项);
/* --------------------------------------------------------------------- */
回答:中继器浮动是问题所在。
简单地杀死.repeater{float:left;}
就可以解决这个问题。然而,我想你可能需要那东西漂浮起来
通过使用class='ui-helper-clearfix'
将所有内容包装在div
中来修复它。这样,当jQuery创建模式时,它会附着到主体上,浮动会被我们的新div清除
我承认,这是我见过的最奇怪的浮动效应
修改后的test.htm
:
$(document).ready(function(){/*设置对话框*/
/*对话框的选项*/
变量选项={
自动打开:错误,
莫代尔:是的,
打开:函数(事件,用户界面){/*模糊按钮,使其不被自动选择*/
$(“.dialog链接按钮”).blur();
/*对齐(居中)按钮中的文本。必须按程序进行,因为每个文本可以有不同的宽度*/
$('.dialog link button.ui button text')。每个(函数(){
证明(这一点);
});
},
可调整大小:false,
按钮:{
取消:函数(){
$(此).dialog(“关闭”);
}
}
};/*实际对话框*/
$(“#连接模式”)。对话框(选项);/*设置按钮*/
$('.jquery ui button').button();/*模糊按钮,这样它们就不会卡在焦点模式中(不知道为什么它们很愚蠢,只是很愚蠢)*/
$('.jquery ui按钮')。单击(函数(){
$(this.blur();
});
});
/*函数在其父级内对*此**/
功能验证(e){
var parentWidth=$(e).parent().width();
var thisWidth=$(e).width();
var padLeft=(parentWidth/2-thiswith/2)+“px”;
$(e).css('padding-left',paddleft);
}
.jstree ul、.jstree li{
显示:块;边距:0;填充:0;列表样式类型:无;}
.jstree li{显示:块;最小高度:18px;行高度:18px;空白:nowrap;左边距:18px;}
.jstree rtl li{左边距:0;右边距:18px;}
.jstree>ul>li{左边距:0px;}
.jstree rtl>ul>li{margin right:0px;}
.jstree ins{显示:内联块;文本装饰:无;宽度:18px;高度:18px;边距:0;填充:0;}
.jstree a{显示:内联块;行高:16px;高度:16px;颜色:黑色;空白:nowrap;文本装饰:无;填充:1px 2px;边距:0;}
.jstree a:focus{outline:none;}
.jstree a>ins{高度:16px;宽度:16px;}
.jstree a>.jstree图标{右边距:3px;}
.jstree rtl a>.jstree图标{左边距:3px;右边距:0;}
li.jstree-open>ul{display:block;}
li.jstree-closed>ul{display:none;}
#瓦卡塔拖动{显示:块;边距:0;填充:4px 4px 4px 24px;位置:绝对;顶部:-2000px;线宽:16px;z索引:10000;}
#vakata拖入{显示:块;文本装饰:无;宽度:16px;高度:16px;边距:0;填充:0;位置:绝对;顶部:4px;左侧:4px;}
#vakata.jstree ok{background:green;}
#vakata Drawed.jstree无效{背景:红色;}
#jstree标记{填充:0;边距:0;线条高度:12px;字体大小:1px;溢出:隐藏;高度:12px;宽度:8px;位置:绝对;顶部:-30px;z索引:10000;背景重复:无重复;显示:无;背景颜色:银色;}
#瓦卡塔上下文菜单{显示:无;位置:绝对;边距:0;填充:0;最小宽度:180px;背景:埃贝贝;边框:1px纯银;z索引:10000;*宽度:180px;}瓦卡塔上下文菜单{最小宽度:180px;*宽度:180px;}
#瓦卡塔上下文菜单ul,#瓦卡塔上下文菜单li{边距:0;填充:0;列表样式类型:无;显示:块;}
#vakata上下文菜单li{行高:20px;最小高度:20px;位置:
<!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; }