twitter-bootstrap – Bootstrap的远程模式对话框不工作

前端之家收集整理的这篇文章主要介绍了twitter-bootstrap – Bootstrap的远程模式对话框不工作前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我使用Twitter Bootstrap api中的远程模态对话框遇到问题.

我正在尝试加载一个来自远程html页面内容的模态对话框.我有两个页面,一个包含按钮(modal-remote.html),另一个包含点击按钮时要显示内容(modal-target.html).

莫代尔,remote.html:

<!DOCTYPE html>
<html lang="en">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

<a href="modal-target.html" data-target="#myModal" role="button" class="btn" data-toggle="modal">
    Launch demo modal</a>

</html>

这是我的目标(或远程)页面代码

莫代尔,target.html上:

<html>
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

    <div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
      </div>
      <div class="modal-body">
        <p>The quick brown fox jumps over the lazy dog. </p>
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="save_btn">Save changes</button>
      </div>
    </div>
</html>

他们在同一个目录.当我点击按钮时,没有任何反应.有谁知道我在做错什么?非远程模式对话框工作正常,我不知道如何使用远程功能.

解决方法

你应该仔细阅读 modal documentation.

If a remote url is provided,content will be loaded via jQuery’s load method and injected into the .modal-body

你的文件应该更像:

莫代尔,remote.html:

<!DOCTYPE html>
<html lang="en">
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
    <link href="bootstrap/css/bootstrap-responsive.css" rel="stylesheet">
    <script src="bootstrap/js/jquery.js"></script>
    <script src="bootstrap/js/bootstrap.js"></script>

<a href="modal-target.html" data-target="#myModal" role="button" class="btn" data-toggle="modal">
    Launch demo modal</a>

<div class="modal hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="myModalLabel">Modal header</h3>
      </div>
      <div class="modal-body">
        <!-- content will be loaded here -->
      </div>
      <div class="modal-footer">
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
        <button class="btn btn-primary" id="save_btn">Save changes</button>
      </div>
    </div>
</html>

莫代尔,target.html上:

<p>The quick brown fox jumps over the lazy dog. </p>
原文链接:https://www.f2er.com/bootstrap/233767.html

猜你在找的Bootstrap相关文章