Bootstrap模式在laravel blade模板中不起作用

我需要在單擊特定鏈接時顯示模式。但是，當我點擊該鏈接時，該模式可見不到一秒，然後再次隱藏。如何使模態穩定？這裏是我的代碼：Bootstrap模式在laravel blade模板中不起作用

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title>@yield('title')</title> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="{{asset('css/main.css')}}" type="text/css"> 
    <link rel="stylesheet" href="{{asset('css/bootstrap.min.css')}}" type="text/css"> 
    <link href="http://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet" type="text/css"> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
    <script src="{{asset('js/jquery.min.js')}}"></script> 
    <script type="text/javascript" src="{{asset('css/angular.min.js')}}"></script> 
    <script type="text/javascript" src="{{asset('css/bootstrap.min.js')}}"></script> 
    <script type="text/javascript" src="{{asset('css/bootstrap.js')}}"></script> 
    <link href="https://fonts.googleapis.com/css?family=Arvo" rel="stylesheet"> 
    <link href="{{asset('font-awesome/css/font-awesome.min.css')}}" rel="stylesheet" type="text/css"> 

</head> 

<style> 
    .search_option{position:fixed; top:75px; right:-185px; height:40px; z-index:10;overflow:hidden; transition:height 1s, right 1s; border-radius:2px; background:rgba(1,1,1,0.6);color:#eee; padding:6px;} 
    .search_option:hover{position:fixed; top:75px; right:0px; height:130px;} 
    .search_option input,.search_option button,.search_option option,.search_option select{color:#111;} 

    .other_option{position:fixed; top:122px; right:-108px; height:40px; z-index:1; overflow:hidden; transition:height 1s, right 1s; border-radius:2px; background:rgba(1,1,1,0.6);color:#eee; padding:6px;} 
    .other_option:hover{position:fixed; top:122px; right:0px; height:67px;} 
    .other_option button{color:#121;} 
    .other_option ul a{color:#ccc;} 
    .other_option ul a:hover{color:#fff; text-decoration:none;} 
</style> 


<body > 

@section('header') 
    @foreach($user as $data) 
<div class="header row" style="margin:0px; height:9vh!important; width:100%; margin-top:-95px; padding-top:3px; margin-left: -0px!important; background: -webkit-linear-gradient(#563D7D, #6E5398); /* For Safari 5.1 to 6.0 */ 
    background: -o-linear-gradient(#563D7D, #6E5398); /* For Opera 11.1 to 12.0 */ 
    background: -moz-linear-gradient(#563D7D, #6E5398); /* For Firefox 3.6 to 15 */ 
    background: linear-gradient(#563D7D, #6E5398);"> 
    <div class="col-xs-6"> 
     <img src="img/jj.png" style="height:4vw; width:4vw; padding:0.5vw; border-radius:2vw;"> 
    </div> 
    <div class="col-xs-6"> 
     <a href="logout"> <img src="{{$data['users_fb_photo']}}" class="pull-right" style="height:4vw; width:4vw; padding:0.5vw; border-radius:2vw;"></a> 
    </div> 

</div> 
@endforeach 
@show 

@yield('content') 
<div class="search_option"> 
    <form> 
     <button type="submit"><i class="fa fa-search"></i></button>&nbsp<input type="text" placeholder="search"><br><br> 
     get posts from last <select> 
      <option>1 day</option> 
      <option>1 month</option> 
      <option>1 year</option> 
     </select>or <br><br> 
     get posts about <input type="text" placeholder="hashtag value" style="width:110px"><br><br> 
    </form> 
</div> 

<div class="other_option"> 
    <button type="submit"><i class="fa fa-cogs"></i></button>&nbsp 
    <ul style="padding-left:50px; list-style: none; margin-top:-30px;"> 



     <!--MODAL LINK--> 



     <li style="padding:5px;"><b><a href="#myModal" data-toggle="modal" data-target="#myModal">Edit Profile</a></b></li> 
     <li style="padding:5px;"><b>Log out</b></li></a> 
    </ul> 
</div> 

<!-- Trigger the modal with a button --> 
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> 

<!-- Modal --> 
<div class="modal fade" id="myModal" 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>

來源

2017-03-10 Tazwar Utshas

您包括jQuery和引導的核心JS文件的兩倍。

刪除<head>部分中的這些腳本是因爲它包含了兩次，之後所有內容都應該正常工作。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
<script type="text/javascript" src="{{asset('css/bootstrap.js')}}"></script>

來源

2017-03-10 18:48:12 dexterb

實際上，只有一個鏈接。我在問了這個問題之前幾分鐘就添加了第二個離線鏈接......它無論如何都不能用於一個鏈接。 –

我明白了..但是在上面的刀片代碼中，我看不到''結束標記，你能證實嗎？ – dexterb

Bootstrap模式在laravel blade模板中不起作用

回答

相關問題