不確定在哪裏把data-backdrop ='static'？

Question

我已經複製了一些代碼以彈出可以正常工作的Bootstrap模式。但是，我想禁用背景，並且從我的研究中我需要將data-backdrop='static'添加到我的按鈕。據我所知，我已經做得正確，但似乎沒有工作。

JS代碼使用modal.toggle來顯示模式，所以我不知道我會把它放在JS代碼中。

這是我的按鈕的代碼：

<a href="@Url.Action("DependentDetail", "Home", new { rid = item.RID })" 
    class="modal-link btn btn-sm btn-primary" data-backdrop="static"> 
    <i class="glyphicon glyphicon-edit"></i> 
    &nbsp;Verify 
</a> 

這是我的JS代碼：

$(function() { 
    // Attach modal-container bootstrap attributes to links with .modal-link class. 
    // when a link is clicked with these attributes, bootstrap will display the href content in a modal dialog. 
    $('body').on('click', '.modal-link', function (e) { 
     e.preventDefault(); 
     $(this).attr('data-target', '#modal-container'); 
     $(this).attr('data-toggle', 'modal'); 
    }); 

    // Attach listener to .modal-close-btn's so that when the button is pressed the modal dialog disappears 
    $('body').on('click', '.modal-close-btn', function() { 
     $('#modal-container').modal('hide'); 
    }); 

    //clear modal cache, so that new content can be loaded 
    $('#modal-container').on('hidden.bs.modal', function() { 
     $(this).removeData('bs.modal'); 
    }); 

    $('#CancelModal').on('click', function() { 
     return false; 
    }); 
}); 

UPDATE

$('body').on('click', '.modal-link', function (e) { 
    e.preventDefault(); 
    $(this).attr('data-target', '#modal-container'); 
    $(this).attr('data-toggle', 'modal'); 
    $(this).attr('backdrop', 'true'); 
}) 

Answer 1

data-backdrop用於指定靜態的backdrop，如果你不想要當用戶在模態外單擊時模態將被關閉。 和backdrop指定的模式是否應該有一個深色覆蓋：

• 真實 - 黑暗覆蓋
• 假 - 無覆蓋（透明）

如果指定值「靜態」，它是不可能一下外面的時候它

把這個腳本代碼內關閉模式，通過您的ID形式把它

$('#myModal').modal({ 
      backdrop: false 
     }); 

這裏是片斷

$(document).ready(function(){ 
 
    $("#myBtn").click(function(){ 
 
     $("#myModal").modal({backdrop: true}); 
 
    }); 
 
    $("#myBtn2").click(function(){ 
 
     $("#myModal2").modal({backdrop: false}); 
 
    }); 
 
    $("#myBtn3").click(function(){ 
 
     $("#myModal3").modal({backdrop: "static"}); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> 
 
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet"/> 
 

 
<div class="container"> 
 
    <h2>Modal Options</h2> 
 
    <p>The backdrop option specifies whether the modal should have a dark overlay (the background color of the current page) or not.</p> 
 
    <!-- Trigger the modal with a button --> 
 
    <button type="button" class="btn btn-info btn-md" id="myBtn">Modal with Overlay (backdrop:true)</button> 
 
    <button type="button" class="btn btn-info btn-md" id="myBtn2">Modal without Overlay (backdrop:false)</button> 
 
    <button type="button" class="btn btn-info btn-md" id="myBtn3">Modal with backdrop:"static"</button> 
 

 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">&times;</button> 
 
      <h4 class="modal-title">Modal with Dark Overlay</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>This modal has a dark overlay.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal2" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">×</button> 
 
      <h4 class="modal-title">Modal without Overlay</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>This modal has no overlay.</p> 
 
      <p><strong>Note:</strong> You cannot click outside of this modal to close it.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
    
 
    <!-- Modal --> 
 
    <div class="modal fade" id="myModal3" role="dialog"> 
 
    <div class="modal-dialog"> 
 
    
 
     <!-- Modal content--> 
 
     <div class="modal-content"> 
 
     <div class="modal-header"> 
 
      <button type="button" class="close" data-dismiss="modal">×</button> 
 
      <h4 class="modal-title">Static Backdrop</h4> 
 
     </div> 
 
     <div class="modal-body"> 
 
      <p>You cannot click outside of this modal to close it.</p> 
 
     </div> 
 
     <div class="modal-footer"> 
 
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     </div> 
 
     </div> 
 
     
 
    </div> 
 
    </div> 
 
</div>