引导模式没有出现答案

【问题标题】：bootstrap modal does not come up引导模式没有出现
【发布时间】：2017-03-31 18:10:51
【问题描述】：

我正在尝试http://bootstrap-confirmation.js.org

我的 html 有

<html lang="en">

<head>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Log Analyzer</title>

    <!-- Bootstrap Core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- MetisMenu CSS -->
    <link href="vendor/metisMenu/metisMenu.min.css" rel="stylesheet">

    <!-- DataTables CSS -->
    <link href="vendor/datatables-plugins/dataTables.bootstrap.css" rel="stylesheet">

    <!-- DataTables Responsive CSS -->
    <link href="vendor/datatables-responsive/dataTables.responsive.css" rel="stylesheet">

    <!-- Custom CSS -->
    <link href="dist/css/sb-admin-2.css" rel="stylesheet">

    <!-- Custom Fonts -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->

    <style>
    td.details-control {
        background: url('images/details_open.png') no-repeat center center;
        cursor: pointer;
    }

    tr.details td.details-control {
            background: url('images/details_close.png') no-repeat center center;
    }

    td.flag-control {
        background: url('images/ban_circle.png') no-repeat center center;
        cursor: pointer;
    }



      table {
            table-layout:fixed;
        }

            .word-break-all{
                word-break:break-all;
            }
        </style>

</head>

<body>

    <div id="wrapper">

        <!-- Navigation -->


        <div id="page-wrapper">
            <div class="row">
                <div class="col-lg-12">
                       <h4></h4>
                </div>
                <!-- /.col-lg-12 -->
            </div>
            <!-- /.row -->
            <div class="row">
                <div class="col-lg-12">
                    <div class="panel panel-default">
                        <div class="panel-heading">
                          <button class="btn btn-default" data-toggle="confirmation">Confirmation</button>

向底部：

<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.js"></script>
<script type="text/javascript" src="js/bootstrap-confirmation.js"></script>

我的 javascript 有：

$(document).ready(function() {

     $('[data-toggle=confirmation]').confirmation({
        rootSelector: '[data-toggle=confirmation]'
        // other options
        });
});

点击按钮没有任何反应

【问题讨论】：

标签： javascript jquery twitter-bootstrap bootstrap-modal

【解决方案1】：

您确定文件在正确的位置吗？在<script> 标记中的2 个中，路径中有vendor 前缀，但在第三个标记中没有。那是对的吗？我们需要查看您的文件系统才能知道。

打开浏览器的网络检查器 - 是否显示 404？ bootstrap-confirmation.js 真的被加载了吗？

编辑：我创建了一支笔：http://codepen.io/anon/pen/OpegVE 它在那里工作。我看到的一个问题是 bootstrap-confirmation 的原始版本可能与 bootstrap 3.x.x 不兼容。这个fork：https://github.com/tavicu/bs-confirmation声称兼容bootstrap 3。我做的笔使用了你在原帖中提到的boostrap-confirmation版本，还链接了bootstrap 2.3.1，它们都是一起工作的。

TL;DR：您的插件版本和您的 boostrap 版本可能不兼容，并且会静默失败？值得研究。

【讨论】：

是的，这很好，因为 confimration.js 我明确下载并放在 js 文件夹下。我在它周围添加了更多的 html
我玩过这个并且能够让它正常工作。我遇到的一个问题是我将确认放在“顶部”，它显示了，但只是不可见（在视口之外）。那会影响你吗？是否存在 CSS 溢出属性或 z-index 问题使其对您不可见？

【解决方案2】：

您的 javascript 缺少结尾 });。这为我修好了。（根据他们的示例制作了我自己的 HTML，你应该包括你的）

【讨论】：

修复了这个问题，因为这不是问题，只是上面的问题中缺少了

【解决方案3】：

不确定缺少的右括号是否是复制和粘贴问题，但将它们放在一起似乎确实有效：http://plnkr.co/edit/tmgKh22PftNMua0Pdmjo

$(document).ready(function() {
    $('[data-toggle=confirmation]').confirmation({
        rootSelector: '[data-toggle=confirmation]'
        // other options
    });
});

【讨论】：

我在问题中解决了这个问题。我没有包括，因为该功能中有更多内容。对此感到抱歉