引导模式不上来

我想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 
     }); 
});

单击按钮没有任何反应

来源

2017-03-31 Vik

你确定这些文件是在正确的地方？在<script>标签中，有两个在路径中有一个vendor前缀，但在第三个中没有。那是对的吗？我们需要查看你的文件系统。

打开浏览器的网络检查器 - 有404的显示吗？ bootstrap-confirmation.js实际上是否加载？

编辑：我创造了一支笔：http://codepen.io/anon/pen/OpegVE它在那里工作。我看到的一个问题是，bootstrap-confirmation的原始版本可能与bootstrap 3.x.x不兼容。这个分支：https://github.com/tavicu/bs-confirmation声称与引导程序3兼容。我制作的笔使用您在原始文章中提到的boostrap-confirmation版本，并链接bootstrap 2.3.1，它们都在一起工作。

TL; DR：您的插件版本和您的boostrap版本可能不兼容，并且无法安静地失败？值得期待。

来源

2017-03-31 18:18:12 jenming

是的，这是好的confimration.js我明确下载并放置在js文件夹下。我在它周围添加了更多的HTML – Vik

我玩过这个，并能够让它正常工作。我碰到的一个问题是，我确认了确认放在“顶部”，并且显示，但是只是不可见（在视口之外）。这能影响你吗？是否有CSS溢出属性或z-index问题使其不可见？ – jenming

您的JavaScript缺少关闭});。这为我修好了。（从他们的例子做了我自己的HTML，你应该包括你的）

来源

2017-03-31 18:23:24 cdurth

修复了这个问题，因为这不是问题，并且刚刚从 – Vik

不知道，如果缺少右括号是一个复制和粘贴的问题，但它似乎工作，当你把它放在一起：http://plnkr.co/edit/tmgKh22PftNMua0Pdmjo

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

来源

2017-03-31 18:31:41 eric

以上的问题中遗失，我在问题中修复了这个问题。我没有包括，因为那个功能里有更多的东西。对不起， – Vik

你能重新创建一个例子并与我们分享？ https://jsfiddle.net/ – cdurth

引导模式不上来

回答

相关问题