twitter-bootstrap 如何从另一个页面打开引导模式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/35118033/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to open a bootstrap modal from another page?
提问by Ash
I have on my Home.asp a login button which opens a modal. I have another page which has a login/logout button. How can I call the modal from Home page on this page.
我的 Home.asp 上有一个登录按钮，可以打开一个模式。我有另一个页面，它有一个登录/注销按钮。如何从本页的主页调用模态。
Home. aspx Code:
家。aspx代码：
<a href="#" data-target="#ModalCLogin" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
Second page Code: (Here on this link click I want to call modal from Home.aspx)
第二页代码：（在此链接上单击我想从 Home.aspx 调用模态）
<a href="#" data-target="#ModalCLogin" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login</a>
回答by Fabio Carvalho
I had the same issue and I found a solution in this link. Let's say you have 2 pages,
我遇到了同样的问题，我在此链接中找到了解决方案。假设你有 2 页，
First.html --> Contains an anchor to the modal
Second.html --> Contains the definition of your modal
First.html --> 包含模态的锚点
Second.html --> 包含你的模态定义
Basically you need to hrefthe location of your modal in "Second.html" and data-targetthe id of your modal
基本上你需要在“Second.html”中href你的模态的位置和数据目标你的模态的id
<li><a href="Second.html" data-target="#theModal" data-toggle="modal">Lab 6</a></li>
Then still in your First.html you need to define the modal with the iduntil the modal-content
然后仍然在您的 First.html 中，您需要使用id定义模态，直到modal-content
<div class="modal fade text-center" id="theModal">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
On the Second.html you define what is inside the modal-content
在 Second.html 上，您定义了modal-content 中的内容
<div class="modal-header">
...
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
...
</div>
It worked for me. All the credits go to Buzinaswho answered this question on the link I provided above
它对我有用。所有的功劳都归于 Buzinas，他在我上面提供的链接上回答了这个问题
回答by Chad
Calling the id of the modal in your other page.
在其他页面中调用模态的 id。
Modal in your Home.aspx:
Home.aspx 中的模态：
<div id="HomeModalId" data-width="500" data-backdrop="static"> Modal Content </Div>
In your second page, the link would be something like.
在您的第二页中，链接类似于。
<a href="Home.aspx/#HomeModalId" data-target="#ModalCLogin" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
回答by Marvin Acosta
Your first page:
您的第一页：
<a href="#" data-target="#ModalCLogin" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>`
on the bottom of your first page:
在您的第一页底部：
<div id="ModalCLogin" class="modal fade text-center">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>
on your 2nd pages: "your modal"
在你的第二页：“你的模态”
<div aria-hidden="true" aria-labelledby="myModalLabel" role="dialog" tabindex="-1" id="ModalCLogin" class="myModal">
