Question

在对话框外单击时，如何使我的bootstrap-modal不关闭？因为我想强迫用户点击模态上的按钮。

下面的

是一个来自bootstrap的模态的例子

<!-- Approve Modal -->
        <div class="modal fade alert-success" id="approvemodal" 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">Approved!</h4>
              </div>
              <div class="modal-body">
                <p>Return to vendor approved. </p>
              </div>
              <div class="modal-footer">
                <button id="approvedone" type="button" class="btn btn-lg btn-success" data-dismiss="modal"><span class="glyphicon glyphicon-ok">  Done</button>
              </div>
            </div>

          </div>
        </div>

Answer 1

以下是现代的做法。您可以参考this link获取有关动态创建模态的方式的更多详细信息。

＆＃13;

function open_modal() {
  
  BootstrapDialog.show({
    title: 'Approved!',
    message: 'Return to vendor approved.',
    closeByBackdrop: false,
    closeByKeyboard: false,
    buttons: [{
      label: '<span class="glyphicon glyphicon-ok">  Done',
      action: function(dialog) {
        dialog.close();
      }
    }]
  });
}

＆＃13;

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/css/bootstrap-dialog.min.css">

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">


<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.7/js/bootstrap-dialog.min.js"></script>

<button onclick="open_modal()" type="button"> Open dialog</button>

＆＃13;

需要模态按钮单击

1 个答案: