Question

我希望创建一个没有标题栏的Dialog，它仍然可以通过内容窗格进行拖动。我可以将一个可拖动的事件附加到一个按钮/句柄，但我更喜欢在不需要它的情况下拖动对话框，并在内容窗格上方将光标更改为正确的可拖动指针。

这是迄今为止简化的代码

$('#prototypeCalendarDialog').dialog({

            autoOpen:true,
            width:400,
            height: 700,
            show: "slide",
            hide: "slide",
            dialogClass: 'calendarDialog',
            minWidth: 400,
            minHeight: 500,
            position: [0,112],
            buttons: {
              "Okay": function(){
                $(this).dialog("close");  
              },
              "Refresh": function() {
               // refresh function here
              },
              "Next Day": function(){
               // next day function here  
              }
            },
            open: function(){
var buttons = $('.calendarDialog .ui-dialog-buttonpane').children('button');
var titleBar = $('.calendarDialog .ui-dialog-titlebar').hide();
////ADD ICON CLASS ACCEPTANCE
buttons.removeClass('ui-button-text-only').addClass('ui-button-text-icon-calendar');

////CHANGE THE BUTTONS DEFAULT STATE
$(buttons[0]).removeClass('ui-state-default').addClass('ui-state-submit');

    ////APPEND THE ICONS TO THE BUTTON
$(buttons[0]).append("<span class='ui-icon ui-icon-check'></span>");
$(buttons[1]).append("<span class='ui-icon ui-icon-refresh'></span>");
$(buttons[2]).append("<span class='ui-icon ui-icon-arrowthick-1-e'></span>");
}
                });

Answer 1

为什么你需要一个对话框，如果你正在做的就是删除使它成为对话框的东西。

做一个无标题的对话框你可以这样做：

var dialog = {
     init: function(){
          $('#prototypeCalendarDialog').draggable().resizeable();
          return this;
     },
     runOpen: function(){
         //in here put all your dialog open options
         return this;
     }
}

dialog.init().runOpen();

Answer 2

将它放入你的CSS

.ui-dialog-titlebar{
 display:none !important;
}

创建可拖动的jquery对话框，隐藏标题栏

2 个答案: