Bootstrap模式不与location.href一起显示

Question

I want the Bootstrap modal to pop up first and I will get some data from it and with that data I want to go a href location. 我希望首先弹出Bootstrap模态，然后从中获取一些数据，并将这些数据放入href位置。

 function callModal(curr){ var currele = curr.id; alert(currele); switch (currele){ case "add_resource": { $("#myModal").modal('show'); window.location.href="add/resource"; break; } } }

 <!DOCTYPE html> <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.3.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"> <h2>Modal Example</h2> <!-- 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> </div> <div> <a href="#" onClick= "callModal(this)" id = "add_resource" >add resouce</a><br> </div> </body> </html>

The issue is : only the href is being called, not the modal If I remove the href call , then the modal is getting called fine, but together its not getting called. 问题是：仅调用href，而不调用模式，如果我删除了href调用，则该模式被调用的很好，但是一起没有被调用。

** In the Code snippet , you can ignore the undefined href location error **在代码段中，您可以忽略未定义的href位置错误

Answer 1

The problem is that you redirect to the new location just after the modal open and there is no time for you to see it opening. 问题是您在模式打开后立即重定向到新位置，并且没有时间看到它打开。 When you redirect to a new location, all of your dom states are refreshed. 当您重定向到新位置时，所有dom状态都会刷新。

Answer 2

**Found the solution. **找到解决方案。 Just using 2 separate functions would solve it. 只需使用2个单独的函数即可解决。 :) ** :) **

 <!-- begin snippet: js hide: false console: true babel: false -->

 <!DOCTYPE html> <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.3.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"> <h2>Modal Example</h2> <!-- 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> </div> <div> <a href="#" onClick="callModal(this)" id="add_resource">add resouce</a><br> </div> </body> </html>

 var direction = "Saurabh Adhikary is best"; function callModal(curr){ var currele = curr.id; alert(currele); switch (currele){ case "add_resource": { $("#myModal").modal('show'); direction ="add/resource"; break; } } } function printer() { alert(direction); location.href = direction; }

 <!DOCTYPE html> <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.3.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"> <h2>Modal Example</h2> <!-- 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" onClick= printer() class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> <div> <a href="#" onClick= "callModal(this)" id = "add_resource" >add resouce</a><br> </div> </body> </html>

Bootstrap模式不与location.href一起显示

问题描述

2 个解决方案

解决方案1
0 2018-02-07 07:38:53

解决方案2
0 已采纳 2018-02-08 06:38:18

Bootstrap模式不与location.href一起显示

问题描述

2 个解决方案

解决方案1 0 2018-02-07 07:38:53

解决方案2 0 已采纳 2018-02-08 06:38:18

解决方案1
0 2018-02-07 07:38:53

解决方案2
0 已采纳 2018-02-08 06:38:18