故障顯示與jQuery（引導）手動模態

Question

我無法手動顯示我bootstrap modal我jQuery代碼

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="container"> 
     <div class="row"> 
      <div class="col-sm-6 col-sm-offset-3 text-center"> 
       <span class="closebtn" data-dismiss="modal">&times;</span> 
       <br><br><br> 
       <div valign="middle" class="alert alert-danger"> 
        <h4>You Have Reached Your Limit</h4> 
       </div> 
      </div> 
     </div> 
    </div> 
</div> 

我曾嘗試：

$('#modal').modal('show'); 

這是我的腳本進口：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<link rel="stylesheet" href="main.css"> 
<script type="text/javascript" src="main.js"></script> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

但它似乎並沒有爲我工作。任何幫助是極大的讚賞！謝謝！

Answer 1

當您添加jQuery和引導庫它應該工作：

看到工作演示在這裏：https://jsfiddle.net/jasny/ZcLSE/

<!-- Button trigger modal --> 
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
    Launch demo modal 
</button> 

<div id="myModal" class="modal fade"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
      <div class="modal-header"> 
       <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> 
       <h4 class="modal-title">Modal title</h4> 
      </div> 
      <div class="modal-body"> 
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque vel vehicula erat. Phasellus vestibulum leo eu mi tempor blandit. Suspendisse eget iaculis lectus. Donec vitae tempus enim, quis tristique magna. Donec lobortis, sem ac pretium viverra, leo nisl consequat arcu, sit amet ullamcorper nunc turpis ac erat. In rutrum auctor ligula, quis mattis enim lacinia eu. Aliquam at magna a erat laoreet iaculis quis a justo. Donec porttitor vulputate massa, nec suscipit nisi mollis sed.</p> 
       <p>Praesent sit amet porttitor magna, auctor feugiat tellus. Sed venenatis tortor turpis, vel vestibulum eros pulvinar et. Pellentesque hendrerit diam quis dui euismod tincidunt. Sed sit amet mauris ipsum. Integer in magna tellus. In tincidunt mi quis nunc gravida sollicitudin. Aliquam ac dui eget erat consequat volutpat in eu magna.</p> 
       <p>Sed feugiat bibendum leo consequat convallis. Donec facilisis, turpis a scelerisque venenatis, felis diam dictum tortor, vitae imperdiet tortor ligula eu lectus. Donec iaculis semper elementum. Nullam dapibus porttitor magna quis convallis. Morbi porttitor quam non magna ullamcorper rhoncus. Phasellus sit amet nunc at turpis pharetra luctus a a massa. Praesent luctus massa in odio faucibus eleifend.</p> 
       <p>In eget lobortis leo, ut luctus odio. Mauris pharetra erat ac tellus hendrerit semper. Cras faucibus ipsum id ante hendrerit rutrum. Donec vitae ullamcorper arcu. Aliquam pellentesque faucibus placerat. Aliquam erat volutpat. In tincidunt metus sit amet ligula sagittis vehicula. Pellentesque velit quam, hendrerit a erat ac, fermentum tincidunt enim. Cras suscipit justo nec consectetur lacinia.</p> 
       <p>Cras pellentesque urna a leo egestas, at ullamcorper augue suscipit. Nulla id lacinia magna, non iaculis est. Praesent a placerat augue, eget eleifend purus. Aenean dignissim, orci et rutrum facilisis, tellus massa porta nulla, quis hendrerit dui ipsum vitae urna. In mattis lectus dolor, id venenatis lectus pellentesque at. Suspendisse posuere metus vel bibendum dignissim. Fusce interdum magna id libero scelerisque suscipit. Duis orci augue, rhoncus eget pharetra ac, viverra nec magna. In accumsan nulla ac suscipit pellentesque. Nulla iaculis luctus tellus, at ultricies urna hendrerit a. Aenean vehicula sodales varius. Duis sodales hendrerit odio non sagittis.</p> 
      </div> 
      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       <button type="button" class="btn btn-primary">Save changes</button> 
      </div> 
     </div> 
     <!-- /.modal-content --> 
    </div> 
    <!-- /.modal-dialog --> 
</div> 
<!-- /.modal --> 

Answer 2

在這裏，你去了一個解決方案https://jsfiddle.net/4c1uux9y/

$('#openModal').click(function(){ 
 
    $('#modal').modal({show: true}); 
 
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<button id="openModal">Open modal</button> 
 

 
<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-sm-6 col-sm-offset-3 text-center"> 
 
     <span class="closebtn" data-dismiss="modal">&times;</span> 
 
     <br><br><br> 
 
     <div valign="middle" class="alert alert-danger"><h4>You Have Reached Your Limit</h4></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

這是你應該做的，以打開一個模式 $('#modal').modal({show: true});

訂購的文件應該是

<link rel="stylesheet" href="main.css"> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 

更新了動態按鈕答案添加

$(document).on('click', '#openModal', function(){ 
    $('#modal').modal({show: true}); 
}); 

希望這會幫助你。

Answer 3

您的代碼有效，但也許您在jQuery和boostrap js加載之前調用$('#modal').modal('show');。確保在文檔中準備好或最後在文件中運行代碼。

見你的代碼在這裏工作：https://jsfiddle.net/ptornhult/k1k5qay8/

Answer 4

是你的兩個的JavaScript和CSS裏面<body></body>標籤文件的引用？如果是，請在<head></head>標籤之間加入您的css。也許css導致問題，而不是jQuery。 如果這不起作用，請嘗試在<body></body>標籤之上創建您的模式。有時候模態在兩者之間的某處不能正確顯示。