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;
    });
});

更新

$('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指定模态是否应具有深色叠加：

true - dark overlay
false - 无覆盖（透明）

如果指定值＆＃34;静态＆＃34;，则在点击外部时无法关闭模态

将此脚本放入您的代码中，将您的模态ID传递给它

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

这是片段

＆＃13;

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

＆＃13;

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

＆＃13;

不知道在哪里放置数据 - 背景=＆＃39;静态＆＃39;？

1 个答案: