Question

我开始使用bootstrap。我抓了一些示例代码，但是接缝不起作用。实际上我有三个问题。

A）。调用第一个模态就可以了。但是从这种模式来看，我无法打开第二种模式。

B）。仍然从第一个模态，我有一个按钮，回到HTML源代码中的联系人div，这是无效的。

C）。从按钮JS，调用函数'Alert_Hello'是正常的：它显示警报，它转到内部链接#contact但在HTML页面似乎重新加载到页面顶部之后。为什么呢？

HTML code：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
  </head>
  <body>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="js/modal.js"></script>

    <a href="#contact" class="btn btn-primary">Contact</a>
    <a href="#about" class="btn btn-primary">About</a>

    <!-- Button trigger modal -->
    <button class="btn btn-success" data-toggle="modal" data-target="#MdlSignIn">Sign In</button>

    <a href="" class="btn btn-danger" onclick="Alert_Hello()">JS</a>

    <!-- Modal -->
    <div class="modal fade" id="MdlSignIn" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4>Sign In Input</h4>
          </div>
          <div class="modal-body">
            <form role="form" action='#' method="post">
           <input type="text" class="form-control" placeholder="Username">
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" id="signin">Sign In</button>
            <button type="button" class="btn btn-primary" id="signin-cnt">Contact</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

      <!-- Modal -->
    <div class="modal fade" id="MdlSignInErr" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Sign In Error</h4>
          </div>
          <div class="modal-body">
            <p>Please review your sign in input.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="contact">Contact us</div>
    <a href="#top" class="btn btn-primary">Top</a>

    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="about">About us</div>
    <a href="#top" class="btn btn-primary">Top</a>
  </body>
</html>

从HTML调用的JavaScript代码：

//set button id on click to hide first modal
$("#signin").on( "click", function() {
        $('#MdlSignIn').modal('hide');
        $('#MdlSignInErr').modal('show');
});

$("#signin-cnt").on( "click", function() {
        $('#MdlSignIn').modal('hide');
        window.location="#contact";
});

function Alert_Hello() {
  alert('Hello from external JavaScript!');
  window.location="#contact";
}

我正在使用bootstrap 3.3.7 for css和js，而我正在使用jquery 3.2.1。

提前感谢您的提示。

Answer 1

请注意：Multiple modals overlay

这可能对您有所帮助，因为您需要设置一种允许模式堆叠的方法，也许就是这种情况。

编辑：

关于C），你想要它只是去“联系”-div？您可能必须关闭模态，然后您可以像这样使用“scrollTo”：

$('html,body').animate({ scrollTop: $("#contact").offset().top}, 'slow'); });

也许这会有所帮助，你不必使用window.location; 如果您希望网址为#contact，如果您希望它可链接，您可以使用window.history.pushState（a，b，c），如：

window.history.pushState('Contact', 'Contact', '#contact');

这会改变页面的标题，同时在当前页面添加“#contact”，就像滚动一样，你不会看到“#contact”。

Answer 2

在处理其他主题几天后，我发现一些JavaScript应放在HTML的最后，以确保它能正常工作。因此，我在这里做了同样的事情，它解决了问题A）。

这是新的HTML代码完美运行（仅适用于问题A）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  </head>
  <body>

    <a href="#contact" class="btn btn-primary">Contact</a>
    <a href="#about" class="btn btn-primary">About</a>

    <!-- Button trigger modal -->
    <button class="btn btn-success" data-toggle="modal" data-target="#MdlSignIn">Sign In</button>

    <a href="" class="btn btn-danger" onclick="Alert_Hello()">JS</a>

    <!-- Modal -->
    <div class="modal fade" id="MdlSignIn" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4>Sign In Input</h4>
          </div>
          <div class="modal-body">
            <form role="form" action='#' method="post">
           <input type="text" class="form-control" placeholder="Username">
            </form>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-success" id="signin">Sign In</button>
            <button type="button" class="btn btn-primary" id="signin-cnt">Contact</button>
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

      <!-- Modal -->
    <div class="modal fade" id="MdlSignInErr" role="dialog" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h4 class="modal-title" id="myModalLabel">Sign In Error</h4>
          </div>
          <div class="modal-body">
            <p>Please review your sign in input.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
          </div>
        </div>
      </div>
    </div>

    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="contact">Contact us</div>
    <a href="#top" class="btn btn-primary">Top</a>

    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>
    <br><br><br><br><br><br><br><br><br><br><br><br>

    <div id="about">About us</div>
    <a href="#top" class="btn btn-primary">Top</a>

    <script type="text/javascript" src="js/modal.js"></script>
  </body>
</html>

我正在结束这个问题。我将弄清楚问题B）和C）可能具有相同的根本原因。

无论如何，感谢您阅读并试图帮助我。

bootstrap modal在同一个html中调用另一个模态

2 个答案: