jquery bootbox屏幕灰顯

我使用bootbox.confirm與ajax調用，並且我得到確認框，但我的屏幕變灰，我無法選擇任何東西。jquery bootbox屏幕灰顯

這裏是什麼樣子：

我首先想到的是，也許我的腳本在_Layout引用錯了，但我不知道：

@Styles.Render("~/Content/css") 
@Scripts.Render("~/bundles/modernizr") 
@Scripts.Render("~/bundles/jquery") 
@Scripts.Render("~/bundles/bootstrap")

捆綁

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
    "~/Scripts/jquery-{version}.js", 
    "~/Scripts/moment.js", 
    "~/Scripts/bootstrap-datetimepicker.js", 
    "~/Scripts/jquery-ui.js", 
    "~/Scripts/Scripts.js" 
); 

bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
    "~/Scripts/bootstrap.js", 
    "~/Scripts/bootbox.js", 
    "~/Scripts/respond.js"));

當檢查這裏是我有：

<body class="modal-open"> 

<div class="modal-backdrop fade in"></div> 
<div class="modal-dialog">...</div>

這裏是我的腳本：

$(document).ready(function() { 

    var table = $("#Table").DataTable(); 

    $("#Table.js-delete").on("click", 
     function() { 

      var link = $(this); 
      $("body").removeClass("modal-open"); 


      bootbox.confirm("Are you sure you want to delete this?", 
       function (result) { 

        $(".modal-backdrop").remove(); 
        if (result) { 
         $.ajax({ 
          url: "/api/Informations/" + $(this).attr("data-id"), 
          method: "DELETE", 
          success: function() { 
           table.row(link.parents("tr")).remove().draw(); 
           link.parents("tr").remove(); 
          } 
         }); 
        } 
       }); 


      }); 
    });

來源

2017-04-26 GTown-Coder

，幾乎看起來像一個z-index的東西，一切在同一時間出現並且其僅僅是出於爲了 – Keith

@Keith所以你有什麼建議？ –

@Keith in bootstrap.css ..'.modal-backdrop'的類的z-index爲1040 –

請做檢查元素退房應用在你的頁面莫代爾和主體班，我敢肯定，這是因爲模式，背景活躍，stucked 這裏有一些事情可以做

1）只需添加數據駁回=「莫代爾」，以按鈕

2）如果模式隱藏或可見，褪色的背景依然存在，不會讓你點擊任何地方你可以用be強制刪除那些低代碼。

首先隱藏你的模態div元素。

$('modalId').modal('hide');

二，從頁面底部刪除'modal-open'類和'.modal-backdrop'。

$('body').removeClass('modal-open'); 
$('.modal-backdrop').remove();

來源

2017-04-26 23:38:59

請看我的更新 –

首先隱藏你的模態div元素。 $（ '＃modalId'）模態（ '隱藏'）。 –

我在哪裏放？此外，我沒有modalid ..這種模式是用bootbox飛行創建的 –

這爲我工作。你可以試試這個請：

查看：

@{ 
    Layout = null; 
} 

<!DOCTYPE html> 

<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>Index58</title> 
    <script src="~/Scripts/jquery-1.12.4.min.js"></script> 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <script src="~/Scripts/bootbox.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#btn").click(function() { 
       bootbox.confirm("This is the default confirm!", 
        function (result) { 
         console.log('This was logged in the callback: ' + result); 
        }); 
      }) 
     }) 
    </script> 
</head> 
<body> 
    <div> 
     <input type="button" value="ShowModal" id="btn" /> 
    </div> 
</body> 
</html>

來源

2017-04-26 22:30:13 kblau

jquery bootbox屏幕灰顯

回答

相關問題