Question

我正在尝试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
        });
});

点击按钮没有任何反应

Answer 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，它们都在一起工作。 / p>

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

Answer 2

您的javascript错过了结束});。这为我修好了。（从他们的例子中制作我自己的HTML，你应该包括你的）

Answer 3

不确定缺少的右括号是否是复制和粘贴问题，但是当您将它们放在一起时似乎确实有效：here

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

bootstrap模态没有出现

3 个答案: