jquery对话框关闭按钮标题叠加关闭图标

问题描述：

我在jQuery对话框中关闭按钮有问题。不知怎的，该按钮的标题没有隐藏，并在图标pic上叠加。jquery对话框关闭按钮标题叠加关闭图标

我检查的元素，这是我得到pic

是什么在_Layout.cshtml呈现

<head> 
    <link href="/Content/Site.css" rel="stylesheet"/> 
    <link href="/Content/datepicker.css" rel="stylesheet"/> 
    <link href="/Content/AboutContactUs.css" rel="stylesheet"/> 
    <link href="/Content/userPage.css" rel="stylesheet"/> 
    <link href="/Content/home.css" rel="stylesheet"/> 
    <link href="/Content/themes/base/core.css" rel="stylesheet"/> 
    <link href="/Content/themes/base/resizable.css" rel="stylesheet"/> 
    <link href="/Content/themes/base/selectable.css" rel="stylesheet"/> 
    <link href="/Content/themes/base/accordion.css" rel="stylesheet"/> 
    <link href="/Content/themes/base/autocomplete.css" rel="stylesheet"/> 
    <link href="/Content/themes/base/button.css" rel="stylesheet"/> 
    <link href="/Content/themes/base/dialog.css" rel="stylesheet"/> 
    <link href="/Content/themes/base/slider.css" rel="stylesheet"/> 
    <link href="/Content/themes/base/tabs.css" rel="stylesheet"/> 
    <link href="/Content/themes/base/progressbar.css" rel="stylesheet"/> 
    <link href="/Content/themes/base/theme.css" rel="stylesheet"/> 
</head> 
<body> 
    .... 
    <script src="/Scripts/jquery-3.1.0.js"></script> 
    <script src="/Scripts/ajax-popup.js"></script> 
    <script src="/Scripts/moment.js"></script> 
    <script src="/Scripts/bootstrap.js"></script> 
    <script src="/Scripts/bootstrap-datepicker.js"></script> 
    <script src="/Scripts/bootstrap-datetimepicker.js"></script> 
    <script src="/Scripts/respond.js"></script> 
    <script src="/Scripts/jquery-ui-1.12.0.js"></script> 
</body>

下面是如何设置的对话框：

$(document).ready(function (e) { 
    .... 
    $("#addSuccessDialog").dialog({ 
     height: 100, 
     width: 200, 
     autoOpen: false, 
     modal: true 
    }); 
    var popupDialog = function (e) { 
     $("#addSuccessDialog").dialog("open"); 
    } 

    // the return viewed has many add buttons, each button is registered with the handler above. 
    $("#giftSearchButton").click(function (e) { 
     $("#ajaxLoader").show(); 
     $.ajax({ 
      url: 'testAmazon', 
      type: 'POST', 
      data: JSON.stringify({ cat: $("#EventGiftViewModal_selectedCategory").val(), kw: $("#EventGiftViewModal_keyWord").val(), tabContentWidth: tabContentWidth }), 
      contentType: 'application/json; charset=utf-8', 
      success: function (e) { 
       $("#ajaxLoader").hide(); 
       $("#giftSearchResult").empty(); 
       $("#giftSearchResult").html(e); 
       $(".addGift-primary").each(function() { 
        $(this).click(popupDialog); 
       }) 
      } 
     }); 
    }); 
    .... 
});

我无法复制结果。在这里测试：https://jsfiddle.net/Twisty/r2a6d3kp/很高兴你找到了解决方案。 – Twisty

答

使用closeText选项摆脱了这种奇怪的行为...

$("#addSuccessDialog").dialog({ 
    closeText:"", 
    height: 100, 
    width: 200, 
    autoOpen: false, 
    modal: true 
});

https://api.jqueryui.com/dialog/#option-closeText

jquery对话框关闭按钮标题叠加关闭图标

相关推荐