在不使用 .modal("show") 的情况下显示 Bootstrap 模态答案

【问题标题】：Show Bootstrap modal without using .modal("show")在不使用 .modal("show") 的情况下显示 Bootstrap 模态
【发布时间】：2017-12-22 14:45:18
【问题描述】：

当我尝试使用$("#modalPlaced").modal("show") 时，我收到Uncaught TypeError: (0 , _jquery2.default)(...).modal is not a function 的错误

但 jQuery 已正确加载，因为此代码正常工作：

$.ajax({
  url: form.action,
  data: $(form).serialize(),
  type: 'POST',
  dataType: 'json',
  success: (data) => {
    if (data.message === 'Success!') {
      $("[data-dismiss=modal]").trigger({type: "click"});

我想知道是否有办法显示 id 为 modalPlaced 的模式？或者如何修复我的.modal is not a function 错误？

【问题讨论】：

你是否包含了所有需要引导的 JS 库？
@ochi 好电话。我正在使用 React，所以我有 import { Modal } from 'react-bootstrap' 。同样的错误。

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

看起来好像您没有包含 js 文件。尝试将以下内容添加到页面上的 head 标记中：

<script src='js/bootstrap.min.js'></script>

【讨论】：

【解决方案2】：

以下作品。你能告诉我这对你有用吗？

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index*102</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#modalPlaced").modal('show');

        })
    </script>
</head>
<body>
    <div>
        <div id="modalPlaced" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <p>Popup</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

【讨论】：