Question

我在ASP.NET Web应用程序中使用JQuery库1.11，但它在模式对话框的页脚上显示不需要的空间。我可以隐藏标题栏但不能隐藏页脚空间:(

以下是用于显示模型的HTML和脚本。

HTML：

<div id="forgotPasswordOverlay" class="modalDialog">
  <div class="modalDialog-title">
    <h4>Forgot Password?</h4>
    <a href="#nogo" class="modalDialog-close">Close</a>
  </div>
  <div class="modalDialog-body">
    <p>
      Please contact your Company Administrator to reset your password if you continue having problems 
        logging in. Your Company Administrator is the only individual able to reset your password.
    </p>
  </div>
  <div class="modalDialog-footer">
    <input id="btnClose" type="button" value="Close" class="submit-button modalDialog-close" />
  </div>
</div>

JS：

<script>
    $("a#forgotPassword").on('click', function(e) {
    $( "#forgotPasswordOverlay" ).dialog({modal:true, width:520, closeOnEscape: false,
    open: function(event, ui) { 
    $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
     $(".ui-dialog-titlebar").hide();   
     $(".ui-dialog-footer").hide();      

              attachOverlay('#forgotPasswordOverlay', {
            load: false
            });
    }});

      $("#btnClose").live('click', function(e) {
            $("#forgotPasswordOverlay").dialog("close");
        });

         $(".modalDialog-close").live('click', function(e) {        
            $("#forgotPasswordOverlay").dialog("close");
        });
  });

</script>

Answer 1

我相信您想要做的是抑制按钮区域，该区域位于对话框窗口的页脚或页脚。如果这是正确的，那么以下内容应该为您隐藏。

$(".ui-dialog-buttonpane").hide();

Answer 2

提供@ sukesh17在评论中提供的答案，作为格式和可读性的答案。

JS：

$("#forgotPasswordOverlay").dialog({
  modal:true,
  draggable: true, 
  resizable:false, 
  width:520, 
  closeOnEscape: false,
  open: function(event, ui) {
    $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    $(".ui-dialog-titlebar").hide(); 
    $(".ui-dialog-buttonpane", ui.dialog || ui).hide();
    $('#forgotPasswordOverlay').siblings('.ui-dialog-buttonpane').hide()‌;
  }
});

CSS：

<style>
  .ui-dialog-titlebar-close { display: none; }
  .ui-widget-content { border:none; }
  .ui-dialog .ui-dialog-content { 
    padding: 0;
    margin:0; 
    display:none;
   }
   .ui-widget-content { 
     color: #776e65; 
     border:none;
   }
</style>

Answer 3

在jQuery 1.10中，ui选项上的open参数为空，仅提供与其他事件选项的一致性。因此，你不能依赖它。我不确定jQuery 1.11。

要隐藏标题栏和按钮窗格，请定位.ui-dialog-titlebar和.ui-dialog-buttonpane类并隐藏它们。

此外，如果您要隐藏标题栏和按钮窗格，请不要忘记为用户提供一种逃离对话框的方法。如果您的窗口小部件内容是一个永远无法获得焦点的菜单，则可能会出现问题。

另外，请确保为按钮提供占位符，否则永远不会创建.ui-dialog-buttonpane div。

var closeText = "Close";
$("#forgotPasswordOverlay").dialog({
  modal:true,
  draggable: true, 
  resizable:false, 
  width:520, 
  closeOnEscape: false,
  buttons: [{ 
    text: closeText, 
    click: function () { 
      $("#forgotPasswordOverlay").dialog("close"); 
    } 
  }],
  open: function(event, ui) {
    $(".ui-widget-overlay").on("click", function () {
      $("#forgotPasswordOverlay").dialog("close");
    });
    $('#forgotPasswordOverlay .ui-dialog-titlebar').hide()‌;
    $('#forgotPasswordOverlay .ui-dialog-buttonpane').hide()‌;
  }
});

作为对原始JS的评论，最好先创建对话框，隐藏它，然后点击，只显示它，而不是每次点击都创建它。

如果您的窗口小部件内容是菜单，则可以使用其他CSS来隐藏额外的填充和对话框边框：

#forgotPasswordOverlay {
  border-width: 0;
  padding: 0;
}

#forgotPasswordOverlay > .ui-dialog-content {
  padding: 0;
}

需要帮助来删除JQuery对话框页脚空间

3 个答案: