无法在Bootstrap中实现模式

Question

i am newbie. I am Creating a button on my homepage,once clicked it shows a modal showing the signin form and i am making a separate html page for my Modal. Here is my Main Code where the Button is placed in my homepage.

<button id="btn1"><a href="signin.html" class="btn btn-success"data-toggle="modal"data-target="#mymodal"type="button">

<span class="glyphicon glyphicon-edit">
</span> Sign In</a>
</button> 

In signin.html

<div class="modal"id="mymodal" >
    <h3 class="modal-header">

    <h1>
    We Are Glad you are Here!
        </h1>
    </div>
<div class="modal-body">
        <div class="container">

      <form class="form-signin">
        <h6 class="form-signin-heading">
   Please sign In</p>
        <label for="inputEmail" class="sr-only">Email address</label>
        <input type="email" id="inputEmail" class="form-control" placeholder="Email address" required autofocus>
        <label for="inputPassword" class="sr-only">Password</label>
        <input type="password" id="inputPassword" class="form-control" placeholder="Password" required>
        <div class="checkbox">
          <label>
            <input type="checkbox" value="remember-me"> Remember me
          </label>
        </div>
        <button class="btn btn-sm btn-primary" type="submit" data-toggle="modal">Sign in</button>
      </form>


    </div>
        <div class="modal-footer">
    <button class="btn" data-dismiss="modal"aria-hidden="true">Close</button>

</div>  </div>

Issue

Modal ain't popping up on same page but it's going on next page.How should i fix it?so that my Signup form remains on the front page.

Answer 1

Working Example

I think the target element with the id mymodal should be in the same page with button , try to place <div class="modal"id="mymodal" ></div> after the button :

<button id="btn1">
    <a href="signin.html" class="btn btn-success" data-toggle="modal" 
      data-target="#mymodal"type="button">
         <span class="glyphicon glyphicon-edit"></span> Sign In
    </a>
</button>
<div class="modal"id="mymodal" ></div> //place the target div after button

Hope this helps.