javascript - 显示 jquery-ui 对话框时出现重复的标题栏

Question

在我的 Spring 应用程序中，每个子页面都显示在 jquery-ui 对话框中。现在，我面临以下问题:当打开窗口时，屏幕上会出现两个标题栏，如下所示:

页面和 <div> 的链接此页面插入的位置放置在页面dashboard.jsp中:

<%@ include file="../include/header.jsp" %>

    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div class="collapse navbar-collapse">
          <ul class="nav navbar-nav">
            <li> <c:url value="/Usuario/listagem" var="usuario"/> <a href="#" class="popup" data-action="${usuario}/1/10/1" data-target="popup-usuario">Usu&aacute;rios</a></li>
            <li> <c:url value="/Permissao/listagem" var="permissao"/> <a href="#" class="popup" data-action="${permissao}/1/10/1" data-target="popup-permissao">Permiss&otilde;es</a></li>
            <li> <c:url value="/Grupo/listagem" var="grupo"/> <a href="#" class="popup" data-action="${grupo}/1/10/1" data-target="popup-grupo">Grupos</a></li>
            <li> <c:url value="/logout" var="logoutUrl"/> <a href="${logoutUrl}">Logout</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </div>

    <div class="dialog" id="popup-usuario">
            <div id="text"> </div>
    </div>

    <div class="dialog" id="popup-permissao">
            <div id="text"> </div>
    </div>

    <div class="dialog" id="popup-grupo">
            <div id="text"> </div>
    </div>

<%@ include file="../include/footer.jsp" %>

处理点击事件并打开jquery-ui对话框的javascript代码是:

$( ".dialog" ).dialog({
      autoOpen: false,
      closeOnEscape: true,
      closeText: "fechar",
      show: {
        effect: "fadeIn",
        duration: 1000
      },
      hide: {
        effect: "fadeOut",
        duration: 1000
      },
      close: function( event, ui ) {
          $(this).remove();
      }
});
function open_dialog(url, dialog_box) {
    $.ajax({
        type: "GET",
        url: url
    }).done(function(data){
        var $temp  = $('<div/>', {html:data});

        $( dialog_box ).dialog( { title: $temp.find('title').text() } );
        $( dialog_box ).find('#text').empty();
        $( dialog_box ).find('#text').html( $temp.remove('head').html() );
        $( dialog_box ).dialog( { height: 680 } );
        $( dialog_box ).dialog( { width: 1046 } );
        $( dialog_box ).dialog( "open" );
    });
}
$(document).on('click', '.popup', function (event) {
    event.preventDefault();
    var action = $(this).data('action');
    var target = $(this).data('target');
    var div = $("#"+target);
    open_dialog(action, div);
});

谁能看出这段代码有什么问题吗？

Answer 1

您已经在页面加载时实例化了对话框。当您真正想要的只是设置一些选项时，您正在复制 open_dialog() 中的内容，如下所示:

$( dialog_box ).dialog("option", "title", $temp.find('title').text());
$( dialog_box ).dialog("option", "height", 680);
$( dialog_box ).dialog("option", "width", 1046);

但是，由于您的高度和宽度不特定于任何对话框，因此您应该在第一次调用 .dialog() 时使用其他选项(autoOpen、closeOnEscape 等)对它们进行硬编码。