jquery - jQuery UI 对话框样式和大小问题
问题描述
我正在制作一个 jQuery UI 对话框。它看起来非常好,而且我的样式很有效,但是对话框中的第一段元素很大。
CSS没有设置字体以外的任何东西。如果我添加max-height: 1.5em;
,那么它们都会像下面那样堆叠在一起。
我不知道这是做什么的,但我的代码如下。我有一种感觉,这是由于页面上其他地方的内容迫使元素移动。
#cadEditor {
display: none;
z-index: 999999 !important;
background: #222;
}
.ui-dialog {
background: #222;
}
.ui-dialog .ui-dialog-titlebar {
background: #333;
height: 40px;
top: 0;
text-align: center;
line-height: 40px;
}
.ui-dialog .ui-dialog-title {
position: absolute;
top: 0;
display: block;
width: 100%;
height: fit-content;
text-align: center;
}
#cadEditor p {
max-height: 1.5em;
}
.ui-dialog .ui-dialog-titlebar-close {
display: none;
}
.ui-dialog .ui-button {
color: #fff;
background: #222;
padding: 0.3em 0.5em;
border: #000000 1px solid;
border-radius: 5px;
margin: 1em;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<div id="cadEditor">
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
</div>
<script>
function showCadEditor(button) {
$('#cadEditor').dialog({
dialogClass: "cadEditorDialog",
autoOpen: true,
title: "Editing Cad " + $(button).attr("forcad"),
modal: true,
resizable: false,
width: 600,
buttons: {
"Save": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
return false;
}
showCadEditor();
</script>
解决方案
我刚刚将您的问题复制到了html。对我来说看起来不错。你能更详细地解释你的问题吗?可能是站点的样式覆盖了弹出窗口的样式。
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"> <title>Title Goes Here</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<style>
#cadEditor {
display: none;
z-index: 999999 !important;
background: #222;
}
.ui-dialog {
background: #222;
}
.ui-dialog .ui-dialog-titlebar {
background: #333;
height: 40px;
top: 0;
text-align: center;
line-height: 40px;
}
.ui-dialog .ui-dialog-title {
position: absolute;
top: 0;
display: block;
width: 100%;
height: fit-content;
text-align: center;
}
#cadEditor p {
max-height: 1.5em;
}
.ui-dialog .ui-dialog-titlebar-close {
display: none;
}
body{color: white}
</style>
</head>
<body> <p>This is my web page</p>
<div id="cadEditor">
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
<p>Test Dialog</p>
</div>
<script>
function showCadEditor(button) {
$('#cadEditor').dialog({
dialogClass: "cadEditorDialog",
autoOpen: true,
title: "Editing Cad " + $(button).attr("forcad"),
modal: true,
resizable: false,
width: 600,
buttons: {
"Save": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
return false;
}
showCadEditor();
</script>
</body>
</html>
推荐阅读
- javascript - 在浏览器中流式传输 FLV 视频
- reactjs - 使用react socket io和spring进行授权的websocket通信
- lua - 如何在罗技 G-Hub LUA 脚本或 AutoHotKey 中模拟罗技 G-Shift 键?
- python - 根据顺序数据对数据帧进行切片
- aws-lambda - 如何从存储库(而不是 s3 或本地目录)下载 lambda 包并使用 terraform 部署它
- javascript - 显示警报时播放声音
- javascript - 如何在 Next.js 中临时禁用 html 压缩?
- javascript - 如何在 javascript 所见即所得编辑器中实现代码按钮
- r - 使用正则表达式提取混合分数和可能还包含 R (stringr) 混合分数的文本
- typescript - 如何读取带有多个箭头和泛型的 TypeScript 签名?