我基本上想要实现的是自定义 JQuery 对话框。
考虑我在下面有一个片段:
$(document).ready(function()
{
var dialogAddPartDiv = $('#dialogAddPart');
$('#showDialogButton').click(function()
{
dialogAddPartDiv.dialog('open');
});
dialogAddPartDiv.dialog({
autoOpen: false,
modal: true,
buttons:
{
'Save' : function(){}
},
beforeClose : function(event)
{
if(!confirm("It won't be saved. Continue?"))
{
return false;
}
else
{
}
},
width:500,
});
});.ui-widget.ui-widget-content
{
border: 2px solid #05788d;
}
.ui-widget-content
{
border: 3px solid #05788d
background: #ffffff;
color: #222222;
}<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button type="button" id="showDialogButton">+Show Dialog</button>
<div id="dialogAddPart">
<table>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td colspan="2"><input type="text" style="width:100%;" value=""></td>
</tr>
<tr>
<td>Test:</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td colspan="2"><input type="text" style="width:100%;" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
</table>
</div>
</body>我尝试使用 CSS 自定义它以更改边框颜色，但它似乎不起作用。我实际上还需要自定义“关闭”和“保存”按钮，但它看起来甚至更难解决问题(例如，当我尝试在 .ui- widget-header 为了摆脱顶部这个令人讨厌的灰色条，它也不起作用。让它起作用的唯一方法是 display:none in >.ui-dialog-titlebar，但它会导致“关闭”按钮消失，这对我来说不太好)。自定义所有这些内容的正确方法是什么？
最佳答案
我对您的代码做了一些修改。在脚本中，我添加了一个新类作为父类，它是 customizeDialog，将 css 更新为标题并使用父类保存按钮，我用新的 css 覆盖了旧的 css。
希望对你有用。谢谢!
$(document).ready(function() {
var dialogAddPartDiv = $('#dialogAddPart');
$('#showDialogButton').click(function()
{
dialogAddPartDiv.dialog('open');
});
dialogAddPartDiv.dialog(
{
autoOpen: false,
modal: true,
buttons:
{
'Save' : function(){}
},
beforeClose : function(event)
{
if(!confirm("It won't be saved. Continue?"))
{
return false;
}
else
{
}
},
width:500,
});
$('.ui-dialog').addClass('customizeDialog');
});
.ui-widget.ui-widget-content
{
border: 2px solid #05788d;
}
.ui-widget-content
{
border: 3px solid #05788d;
background: #ffffff;
color: #222222;
}
/* Customize dialog css */
.ui-widget.ui-widget-content.customizeDialog{
border: none;
box-shadow: 0 5px 35px rgba(190, 184, 184, 0.65);
}
.customizeDialog .ui-widget-header, .customizeDialog .ui-button{
background-color: transparent;
background-image: none;
color: #fff;
border: 0;
padding: 0;
}
.customizeDialog .ui-button{
color: #fff;
background-color: #337ab7;
border-color: #2e6da4;
padding: 10px;
font-size: 13px;
}
.customizeDialog .ui-dialog-titlebar-close{
background: #ddd;
}<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<body>
<button type="button" id="showDialogButton">+Show Dialog</button>
<div id="dialogAddPart">
<table>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td colspan="2"><input type="text" style="width:100%;" value=""></td>
</tr>
<tr>
<td>Test:</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td colspan="2"><input type="text" style="width:100%;" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
<tr>
<td>Test</td>
<td><input type="text" size="40" value=""></td>
</tr>
</table>
</div>
</body>关于javascript - 自定义 JQuery UI 对话框的正确方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/47974790/