Bootstrap模式將不會顯示

Question

我遇到了一個問題，我的模態窗口不顯示在屏幕上，我相信這個問題與fass css類的引導有關，因爲當我不包括模態窗口顯示的類時，淡入淡出類的背景全部以黑色顯示。

這是我的模態窗口：

function DeleteVenueModal(Name, ID) { 
 
    console.log("delete venue function hit"); 
 
    VenueModalID = ID; 
 

 
    txtVenueModal.innerText = "Delete " + Name; 
 
    $("#VenueModal").modal(); 
 
} 
 

 
DeleteVenueModal("Someone", "34");

.modal.fade .modal-dialog { 
 
    -webkit-transition: -webkit-transform 0.3s ease-out; 
 
    transition: -webkit-transform 0.3s ease-out; 
 
    -o-transition: -o-transform 0.3s ease-out; 
 
    transition: transform 0.3s ease-out; 
 
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out, -o-transform 0.3s ease-out; 
 
    -webkit-transform: translate(0, -25%); 
 
    -o-transform: translate(0, -25%); 
 
    transform: translate(0, -25%); 
 
} 
 

 
.modal-backdrop.fade { 
 
    opacity: 0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="modal fade" id="VenueModal" role="dialog"> 
 
    <div class="modal-dialog modal-sm"> 
 
    <div class="modal-content"> 
 
     <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
     <h4 id="txtVenueModal" class="modal-title">Delete </h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
     <p>Are you sure you want to permanently delete this venue?</p> 
 

 
     </div> 
 
     <div class="modal-footer"> 
 
     <button type="button" onclick="RemoveVenue();" class="btn btn-success" data-dismiss="modal" style="float: left">Confirm</button> 
 
     <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
This is the JavaScript function that opens the modal window:

如果您需要看到更多的代碼只是問

Answer 1

解決了這個由最新版本降級上的NuGet可我的引導到版本3

Answer 2

@Cathal O'Donnell檢查以下代碼。我希望你也期待着這一點。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<a href="#" data-toggle="modal" data-target="#VenueModal">Click me</a> 
 

 
<!-- ...................Modal Starts.............. --> \t 
 
<div class="modal fade" id="VenueModal" role="dialog"> 
 
     <div class="modal-dialog modal-sm"> 
 
      <div class="modal-content"> 
 
       <div class="modal-header"> 
 
        <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
        <h4 id="txtVenueModal" class="modal-title">Delete </h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <p>Are you sure you want to permanently delete this venue?</p> 
 
        
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" onclick="RemoveVenue();" class="btn btn-success" data-dismiss="modal" style="float: left">Confirm</button> 
 
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 
     </div> 
 
    </div>

Answer 3

重置您的CSS代碼：

.modal.fade .modal-dialog { 
    -webkit-transition: -webkit-transform 0.3s ease-out; 
    transition: -webkit-transform 0.3s ease-out; 
    -o-transition: -o-transform 0.3s ease-out; 
    transition: transform 0.3s ease-out; 
    transition: transform 0.3s ease-out, -webkit-transform 0.3s ease-out, -o-transform 0.3s ease-out; 
    -webkit-transform: translate(0, -25%); 
     -o-transform: translate(0, -25%); 
      transform: translate(0, -25%); 
} 
.modal 
{ 
    display:block !important; 
} 

.fade { 
    opacity: 1.0 !important ; 
} 

我已經修改了你的類.modal-backdrop.fade到.fade。如果你有父類.modal-backdrop，那麼你可以擁有它，因爲我找不到這樣的類，所以我刪除了。

請嘗試這段CSS代碼，並讓我知道。