不确定在哪里把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>