无法在Bootstrap

Question

我是新手。   我正在我的主页上创建一个按钮，一旦点击它就会显示一个显示登录表单的模式，我正在为我的模态创建一个单独的html页面。   这是我的主代码，按钮放在我的主页上。

<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> 

在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>

问题

模态不是在同一页面上弹出，但它会在下一页上进行。我该怎样修复它？这样我的注册表单就会保留在首页上。

Answer 1

<强> Working Example

我认为标识为mymodal的目标元素应位于button的同一页面中，请尝试在按钮后面放置<div class="modal"id="mymodal" ></div>：

<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

希望这有帮助。