如何从另一个页面打开引导模态？

Question

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. aspx Code:

<a href="#" data-target="#ModalCLogin" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span>&nbsp;Login</a></li>

Second page Code: (Here on this link click I want to call modal from Home.aspx)

<a href="#" data-target="#ModalCLogin" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span>&nbsp;Login</a>

Answer 1

I had the same issue and I found a solution in this link . Let's say you have 2 pages,

• First.html --> Contains an anchor to the modal

• Second.html --> Contains the definition of your modal

Basically you need to href the location of your modal in "Second.html" and data-target the id of your modal

<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 id until the 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

<div class="modal-header">
  ...
</div>
<div class="modal-body">
  ...
</div>
<div class="modal-footer">
  ...
</div>

It worked for me. All the credits go to Buzinas who answered this question on the link I provided above

Answer 2

Calling the id of the modal in your other page.

Modal in your 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>&nbsp;Login</a></li>

Answer 3

Your first page:

 <a href="#" data-target="#ModalCLogin" data-toggle="modal"><span class="glyphicon glyphicon-log-in"></span>&nbsp;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">