Question

我有3个不同的文件index.php，register.php和login.php。在index.php中有一个锚点，它将显示带有来自login.php的远程内容的模态，它完美地工作，而在login.php中有一个选项可以改变从register.php远程加载的模态的内容但是当我点击它时，它会在控制台中显示javascript错误。

控制台错误：Uncaught TypeError: undefined is not a function bootstrap.js:868

我使用的是jquery 1.10.1和bootstrap 3.1.1

的index.php

<script src="common/js/jquery.js"></script>
 <script src="common/bootstrap/js/bootstrap.js"></script>   

<div class="account_link">
         <a href="login.php" data-toggle="modal" data-target="#dialog">Sign In</a>
       </div>
      <div id="dialog" class="modal fade" role="dialog" tabindex="-1" area-  hidden="true" aria-labelledby="signin">
         <div class="modal-dialog">
            <div class="modal-content" style="width:320px">

         </div>
        </div>
     </div>

的login.php

<html>
  <head></head>
  <body>
    <form name="signin" method="post">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="signin">Sign In</h4>
      </div>
      <div class="modal-body">
        <div class="login_control clearfix">
          <label>Email</label>
          <input type="email" name="email" id="email" placeholder="Email" class="textfield"/>
        </div>
        <div class="login_control clearfix">
          <label>Password</label>
          <input type="password" name="password" id="password" placeholder="Password" class="textfield"/>
        </div>
        <p><input type="checkbox"/><span>Remember me on this computer</span></p>
        Not a member? <a href="register.php" data-toggle="modal" data-target="#dialog">Sign Up</a>
        <a href="javascript:void(0)">Forgot Password</a>
      </div>
      <div class="modal-footer">
        <button type="submit" class="login_btn">Sign In</button>
      </div>

    </form>
  </body>
</html>

register.php

    <html>
  <head></head>
  <title>Create Account</title>
  <body>
    <form method="post" name="frm-signup">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="signin">Sign In</h4>
      </div>
      <div class="modal-body">
        <div class="clearfix">
          <label>Email</label>
          <input type="email" class="textfield" name="reg_email" placeholder="Email"/>
        </div>
        <div class="clearfix">
          <label>Password</label>
          <input type="password" class="textfield" name="reg_fname" placeholder="First Name"/>
        </div>
        <div class="clearfix">
          <label>Confirm Password</label>
          <input type="password" class="textfield" name="reg_fname" placeholder="First Name"/>
        </div>
      </div>
      <div class="modal-footer">
        <div class="clearfix">
          <button type="submit" name="sign-up">Create Account</button>
        </div>
      </div>

    </form>
  </body>
</html>

有谁知道我怎么能实现这个目标？

感谢。

Answer 1

如果第一个模态本身偏远，我认为你不能从第一个模态中调用第二个模态。

如果你考虑一下，bootstrap的js将在页面加载时查看你的DOM。它会发现你的模态锚点，它会附加一个事件。

然而，当该事件触发并且加载了远程内容（即显示login.php）时，bootstrap将不会再次通过新的DOM寻找可以附加新事件的新模态锚点。

您可能最好在自己的JS中使用引导程序API中的.modal()函数执行此操作，并在显示login.php之后附加事件。

您可能已经阅读了相关文档，但here is a link to it anyway，以防万一！

bootstrap模态远程内容错误

1 个答案: