在对话框中自定放置按钮 – jquery ui
我想将添加到对话框中的按钮移动到顶部或左侧，如何使用jquery ui。 如果添加确定，它会显示在最右端，是否可以放置？
$(function() { $("#dialog-message").dialog({ modal : true, resizable : false, buttons : { ok:function() { $(this).dialog("close"); } } }); }); 要将按钮左/中/右对齐，请禁用浮动并相应地调整text-align属性：
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; } .ui-dialog .ui-dialog-buttonpane { text-align: center; /* left/center/right */ }
DEMO
这是按钮的标记：
默认的css指定：
-
text-align: left;对于元素.ui-dialog-buttonpane -
float:right的元素.ui-dialog-buttonset
虽然上面的答案很棒，但它适用于所有按钮。 下面的示例是一个modal dialog，可以单独定位每个按钮，也可以单独设置样式。
$("#divModelPopup").dialog({ closeOnEscape: false, width: 500, minWidth: 500, minHeight: 400, modal: true, open: function (event, ui) { $(".ui-dialog-titlebar-close").hide(); }, title: "Terms & Conditions", buttons: { "I Decline": { click: function () { $(".lnkLogout").click(); }, text: "I Decline", class: "btnDlgDecline" }, "I Accept": { click: function () { $(this).dialog("close"); // Update user details as accepted $.ajax({ .... Ajax call }); }, text: "I Accept", class: "btnDlgAccept" }, "Print": function () { $("#divModelPopupPrintArea").printArea(options); } }, resize: function (event, ui) { $("#divModelPopupScroll").height(ui.size.height / 1.27); } });
然后在CSS中
.btnDlgDecline{ position: absolute; left: 10px; color: red !important; } .btnDlgAccept{ color: green !important; }
希望能帮助到你。
您可以在按钮标签内更改按钮的样式。
Ok:{ style:"margin-right:640px", click: function () { //do something } },
这种风格也适用于多个对话框。好运。
如果您有三个按钮，并且您希望它们在线上分布良好，请尝试：
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset { float: none; } .ui-dialog .ui-dialog-buttonpane { text-align: center; /* left/center/right */ } .ui-button { margin-left: 5% !important; margin-right: 5% !important; }
小心，正如之前所说， 重要的是重要的
请享用，