引導模式不上來

我想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

引導模式不上來

回答

相關問題