2016-08-04 11 views
0

Ich habe ein Problem mit der Schließen-Schaltfläche im jQuery-Dialogfeld. Irgendwie wurde der Titel der Schaltfläche nicht versteckt und überlagert das Symbol pic.Jquery Dialogfeld schließen Schaltfläche Titel Overlays schließen Symbol

inspizieren ich das Element, und das ist, was ich habe pic

Was im _Layout.cshtml gemacht hat

<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> 

Hier ist, wie ich den Dialog ein:

$(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); 
       }) 
      } 
     }); 
    }); 
    .... 
}); 
+0

Ich konnte die Ergebnisse nicht replizieren. Getestet hier: https://jsfiddle.net/Twisty/r2a6d3kp/ Froh, dass Sie eine Lösung gefunden haben. – Twisty

Antwort