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>

它开始，但与先前的块没有相同的结果。然后我问，我怎么能解决这个问题？我应该有一个只能点击相关按钮而不能在屏幕的任何部分关闭的模态窗口。非常感谢。

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模式窗口无法启动

2 个答案: