BOOTSTRAP 模态 window 到运行未启动

Question

我正在尝试按照此处的建议了解 BOOTSTRAP：http://nakupanda.github.io/bootstrap3-dialog/ 但我遇到了一个小问题。这是完整的 html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Example of Bootstrap 3 Modals</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
</head>
<body>

<script type="text/javascript">
    BootstrapDialog.show({
            message: 'Hi Apple!',
            message: 'You can not close this dialog by clicking outside and pressing ESC key.',
            closable: true,
            closeByBackdrop: false,
            closeByKeyboard: false,
            buttons: [{
                label: 'Close the dialog',
                action: function(dialogRef){
                    dialogRef.close();
                }
            }]
        });
    });
</script>

<!-- Modal -->
<div id="myModal" class="modal fade" 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 Header</h4>
      </div>
      <div class="modal-body">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

</body>
</html>

好吧，如果我有这个块：

<script type="text/javascript">
    BootstrapDialog.show({
            message: 'Hi Apple!',
            message: 'You can not close this dialog by clicking outside and pressing ESC key.',
            closable: true,
            closeByBackdrop: false,
            closeByKeyboard: false,
            buttons: [{
                label: 'Close the dialog',
                action: function(dialogRef){
                    dialogRef.close();
                }
            }]
        });
    });
</script>

它没有启动，但是如果我使用这个：

<script type="text/javascript">
    $(document).ready(function(){
        $("#myModal").modal('show');
    });
</script>

它开始了，但与我想要的先例块的结果不同。然后我问，我该如何解决这个问题？我应该有模态 window ，它只能在相关按钮中单击而不是在屏幕的任何部分中单击才能关闭。非常感谢。

Answer 1

这是因为 bootstrap3-dialog 是 Bootstrap 的插件。您必须包含其他文件才能正常工作：

<link rel="stylesheet" href="https://nakupanda.github.io/bootstrap3-dialog/assets/bootstrap-dialog/css/bootstrap-dialog.min.css">
<script src="http://nakupanda.github.io/bootstrap3-dialog/assets/bootstrap-dialog/js/bootstrap-dialog.min.js"></script>

工作演示：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

<!-- Include CSS and JS files for bootstrap3-dialog -->
<link rel="stylesheet" href="https://nakupanda.github.io/bootstrap3-dialog/assets/bootstrap-dialog/css/bootstrap-dialog.min.css">
<script src="http://nakupanda.github.io/bootstrap3-dialog/assets/bootstrap-dialog/js/bootstrap-dialog.min.js"></script>

<script type="text/javascript">
  
$(document).ready(function(){

  BootstrapDialog.show({
    message: 'Hi Apple!',
    message: 'You can not close this dialog by clicking outside and pressing ESC key.',
    closable: true,
    closeByBackdrop: false,
    closeByKeyboard: false,
    buttons: [{
      label: 'Close the dialog',
      action: function(dialogRef){
        dialogRef.close();
      }
    }]
  });

});
  
</script>

Answer 2

尝试将您的第一个块（包含您想要的所有设置）放入一个文档就绪处理程序中，就像您的第二个块一样。

这是快捷方式版本：

$(function() {
  BootstrapDialog.show({
    message: 'Hi Apple!', 
    message: 'You can not close this dialog by clicking outside and pressing ESC key.',
    closable: true, 
    closeByBackdrop: false,
    closeByKeyboard: false, 
    buttons: [{ 
      label: 'Close the dialog', 
      action: function(dialogRef) { 
        dialogRef.close(); 
      }
    }]
  });
});

这应该给 Bootstrap 库加载时间。

BOOTSTRAP 模态 window 到运行未启动

BOOTSTRAP modal window to run not start

jquery

twitter-bootstrap

bootstrap-modal

BOOTSTRAP 模态 window 到 运行 未启动

BOOTSTRAP modal window to run not start

jquery

twitter-bootstrap

bootstrap-modal

BOOTSTRAP 模态 window 到运行未启动