2017-07-17 57 views
0

當我嘗試使用$("#modalPlaced").modal("show")我得到的Uncaught TypeError: (0 , _jquery2.default)(...).modal is not a function顯示引導模式,而無需使用.modal(「秀」)

一個錯誤,但因爲這代碼工作正常jQuery是正確加載:

$.ajax({ 
    url: form.action, 
    data: $(form).serialize(), 
    type: 'POST', 
    dataType: 'json', 
    success: (data) => { 
    if (data.message === 'Success!') { 
     $("[data-dismiss=modal]").trigger({type: "click"}); 

我m想知道是否有方法顯示modalPlaced的ID的模式? 或者我該如何解決我的.modal is not a function錯誤?

+1

您是否包含了所有需要引導程序的JS庫? – ochi

+0

@ochi很好的電話。我使用React,所以我有'從'react-bootstrap''導入{Modal}。同樣的錯誤。 –

回答

0

看起來好像你沒有包含js文件。 嘗試添加下列到你的頁面上的頭標籤:

<script src='js/bootstrap.min.js'></script>

0

以下的作品。你能告訴我這是否適合你嗎?

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="viewport" content="width=device-width" /> 
    <title>IndexStackOverflow102</title> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css"> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> 
    <script type="text/javascript"> 
     $(function() { 
      $("#modalPlaced").modal('show'); 

     }) 
    </script> 
</head> 
<body> 
    <div> 
     <div id="modalPlaced" class="modal fade" tabindex="-1" role="dialog"> 
      <div class="modal-content"> 
       <div class="modal-body"> 
        <p>Popup</p> 
       </div> 
       <div class="modal-footer"> 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
       </div> 
      </div> 
     </div> 
    </div> 
</body> 
</html>