[英]Modal form not showing when clicking a button
這是我的HTML
<html lang ="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="css/bootstrap.min.css"> </head> <body> <div class="container"> <p></p> <button class="btn btn-outline-primary" data-toggle="modal" data-target="#insertData">Insert Data</button> <!-- Modal --> <div class="modal fade" id="insertData" tabindex="-1" role="dialog" aria-labelledby="insertLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="insertLabel">Insert Data</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form> <div class="modal-body"> <form> <div class="form-group"> <label for="nm">Full Name</label> <input type="email" class="form-control" id="nm" aria-describedby="emailHelp" placeholder="Full Name"> </div> <div class="form-group"> <label for="em">Email</label> <input type="password" class="form-control" id="em" placeholder="Email"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" onclick="saveData()" class="btn btn-primary">Save</button> </div> </form> </div> </div> </div> <p></p> </div> <script src="http://code.jquery.com/jquery-2.1.1.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
當我單擊按鈕時，沒有任何反應。 不知怎的，如果我改變了風格鏈接到一個URL，該按鈕的作品，但不必須像背景顏色這個我已經下載的引導，把它變成我的文件夾中。 我想念什么或做錯什么？
您應該將bootstrap和jquery導入head而不是body 。 檢查此代碼。
編輯： @Swellar的更正：“您還可以將腳本放入其中。這只是何時使用腳本及其依賴項的順序問題，因此大部分時間它都位於上方，尤其是jquery.min.js “
<html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <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"></script> </head> <body> <div class="container"> <p></p> <button class="btn btn-outline-primary" data-toggle="modal" data-target="#insertData">Insert Data</button> <!-- Modal --> <div class="modal fade" id="insertData" tabindex="-1" role="dialog" aria-labelledby="insertLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="insertLabel">Insert Data</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form> <div class="modal-body"> <form> <div class="form-group"> <label for="nm">Full Name</label> <input type="email" class="form-control" id="nm" aria-describedby="emailHelp" placeholder="Full Name"> </div> <div class="form-group"> <label for="em">Email</label> <input type="password" class="form-control" id="em" placeholder="Email"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" onclick="saveData()" class="btn btn-primary">Save</button> </div> </form> </div> </div> </div> <p></p> </div> </body> </html>
根據我們的對話，您希望將“ Insert Data設置為主要顏色。 然后取出outline中btn-outline-primary 。 您還可以通過“ Save按鈕輕松復制課程
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <div class="container"> <p></p> <button class="btn btn-primary" data-toggle="modal" data-target="#insertData">Insert Data</button> <!-- Modal --> <div class="modal fade" id="insertData" tabindex="-1" role="dialog" aria-labelledby="insertLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="insertLabel">Insert Data</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form> <div class="modal-body"> <form> <div class="form-group"> <label for="nm">Full Name</label> <input type="email" class="form-control" id="nm" aria-describedby="emailHelp" placeholder="Full Name"> </div> <div class="form-group"> <label for="em">Email</label> <input type="password" class="form-control" id="em" placeholder="Email"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" onclick="saveData()" class="btn btn-primary">Save</button> </div> </form> </div> </div> </div> <p></p> </div>
這是原始代碼（引導程序的css文件和jquery除外）
<html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> </head> <body> <div class="container"> <p></p> <button class="btn btn-primary" data-toggle="modal" data-target="#insertData">Insert Data</button> <!-- Modal --> <div class="modal fade" id="insertData" tabindex="-1" role="dialog" aria-labelledby="insertLabel" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title" id="insertLabel">Insert Data</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <form> <div class="modal-body"> <form> <div class="form-group"> <label for="nm">Full Name</label> <input type="email" class="form-control" id="nm" aria-describedby="emailHelp" placeholder="Full Name"> </div> <div class="form-group"> <label for="em">Email</label> <input type="password" class="form-control" id="em" placeholder="Email"> </div> </form> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> <button type="submit" onclick="saveData()" class="btn btn-primary">Save</button> </div> </form> </div> </div> </div> <p></p> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script> </body> </html>
實際上，您被標記為BS4，但是您正在使用外部BS3 js，外部jQuery 2.x和本地未知的BS css。
首先正確使用BS，然后閱讀文檔 。
單擊表單提交按鈕時觸發遠程引導程序模態，然后顯示遠程模態內容嗎？
[英]Fire a remote bootstrap modal when clicking a form submit button, remote modal content then has form data to be displayed?
Boostrap模式在單擊模式按鈕之前在頁面上顯示彈出內容
[英]Boostrap modal showing popup content on page before clicking on modal button
單擊按鈕觸發laravel 5.3中的模式彈出窗口時提交表單
[英]Form gets submitted when clicking the button to trigger the modal pop up in laravel 5.3
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.