1

如何将按钮位置更改为页面顶部?我尝试了很多示例,但这些示例仅显示在左侧或右侧。但我想在表单顶部显示按钮。

      $( "#popup" ).click(function() {
$( "#dialog-form" ).dialog( "open" );
});

$( "#dialog-form" ).dialog({ 
 autoOpen: false,
 height: 300,
 width: 350,
 modal: true,
 buttons : {
 "search" : function(){
 $(this).css({position:top})
 },
 "use selected" : function(){}
 }

 });
4

3 回答 3

2

请尝试在打开对话框时添加按钮元素位置,就像下面的代码片段一样

$('#dialog-form').dialog({
  open: function (event, ui) {
    $(this).prepend($(this).parent().find('.ui-dialog-buttonpane'));
  },
  ...
于 2013-12-03T09:32:56.100 回答
1

我喜欢 Cliff 的回答,但我会使用.before(),而不是.prepend()因为这将使您的按钮窗格和内容元素保持在同一级别。

$('#dialog-form').dialog({
    open: function (event, ui) {
        $(this).before($(this).parent().find('.ui-dialog-buttonpane'));
    },
    ...

然后我还会更改按钮窗格的边框。(取决于你的主题)

CSS

.ui-dialog .ui-dialog-buttonpane {
    border-top-width:0px; border-bottom-width:1px;
}
于 2013-12-05T16:41:13.783 回答
0

看看这个小提琴

本质上,您的 CSS:

div.ui-dialog-buttonpane {
    position: absolute;
    /* height + padding + margin of header */
    top: 41px;
    /* play around with this setting to your liking. */
    width: 97%;
    /* use a more specific selector to avoid using !important */
    padding: 0 !important;
}
/* for a bottom border use this */
div.ui-dialog-buttonpane {
    /* use a more specific selector to avoid using !important */
    border-width: 0 0 1px 0 !important;
}
于 2013-07-17T17:26:30.883 回答