ブートストラップ4.0.0-betaモーダルは動作しません。 Popper.jsが壊れています

-1

私は、クリックするとモーダルを開くためのボタンを作成しています。ブートストラップ4.0.0-betaモーダルは動作しません。 Popper.jsが壊れています

<--Modal trigger--> 
    <button type="button" data-toggle="modal" data-target="#myModal">Create a new category</button> 

<--Modal body--> 
<div id="myModal" class="modal fade" role="dialog"> 
    <div class="modal-dialog"> 

     <!-- Modal content--> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal">&times;</button> 
       <h4 class="modal-title">Modal Header</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Some text in the modal.</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
      </div> 
     </div> 

    </div> 
</div>

何とかトリガーが機能しません。ボタンをクリックするとモーダルはポップアップしません。私のcdnは次の通りです：

<--Bootstrap css--> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" 
     integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous"> 

<--Bootstrap and JQuery js--> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.js"></script>

私はpopper.jsエラーが発生しています。私は他のプロジェクトでこのエラーを受けていました。しかし、popper.jsをインストールしてdev-dependenciesに追加し、 'npm run dev'を実行すると、それが最後に解決されました。今回はどうにかしてもうまくいかないでしょう。

package.jsonで私のDEV-依存関係：

"devDependencies": { 
"axios": "^0.16.2", 
"bootstrap-sass": "^3.3.7", 
"cross-env": "^5.0.1", 
"jquery": "^3.1.1", 
"laravel-mix": "^1.0", 
"lodash": "^4.17.4", 
"vue": "^2.1.10", 
"popper.js": "^1.12.5"

}、

注：私はLaravelフレームワークを使用していますし、ノードを介してポッパーをインストールしました。

HELP！

出典

2017-10-17 Sagar Kale

いくつかのスクリプトを追加する必要があります。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

出典

2017-10-17 13:44:24

<!DOCTYPE html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" integrity="sha384-PsH8R72JQ3SOdhVi3uxftmaW6Vc51MKb0q5P2rRUpPvrszuE4W1povHYgTpBfshb" crossorigin="anonymous"> 
    <title></title> 
</head> 

<body> 
    <div class="alert alert-danger alert-dismissible fade show" role="alert"> 
    <strong>My Project</strong> 
    You should check in on some of those fields below. 
    <button type="button" class="close" data-dismiss="alert" aria-label="Close"> 
     <span aria-hidden="true">&times;</span> 
    </button> 
    </div> 
</body> 

</html>

出典

2017-11-04 07:19:54

ブートストラップ4.0.0-betaモーダルは動作しません。 Popper.jsが壊れています

答えて

関連する問題