网页上不会出现模态框答案

【问题标题】：Modal won't come up on webpage网页上不会出现模态框
【发布时间】：2015-07-24 17:43:12
【问题描述】：

我正在尝试制作一个已经在主页（索引）上工作的模式来处理其余的子页面，但是由于某种原因它不会出现。但是，如果我更改模式的名称（因此它与索引上的名称不同），它会在页面加载时出现并且您无法关闭它。

我一直在寻找类似的问题，并在各处尝试了许多不同的解决方案，但没有任何效果。请帮帮我！ :(

这是代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">


    <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>TICOPD | Landscapes</title>

    <link rel="stylesheet" href="supersized.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="js/supersized.shutter.css" type="text/css" media="screen" />
    <link rel="stylesheet" type="text/css" href="styles.css">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

    <script type="text/javascript" src="js/jquery.easing.min.js"></script>

    <script type="text/javascript" src="js/supersized.3.2.7.min.js"></script>
    <script type="text/javascript" src="js/supersized.shutter.min.js"></script>

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="js/bootstrap.min.js"></script>

    <link href="hover/css/hover.css" rel="stylesheet" media="all">


    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>    
    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" media="all">


    <style type="text/css">
    ul#demo-block{ margin:0 15px 15px 15px; }
        ul#demo-block li{ margin:0 0 10px 0; padding:10px; display:inline; float:left; clear:both; color:#aaa; background:url('img/bg-black.png'); font:11px Helvetica, Arial, sans-serif; }
        ul#demo-block li a{ color:#eee; font-weight:bold; }
</style>

    <script type="text/javascript">

    </script>

</head>



<body>
<div id="content">   
        <nav id="menu" style="margin-top: 75px;">
              <ul class="parent-menu">  
                  <li>
                      <a href="index.html" class="hvr-shadow-radial" >Home</a>
                  </li>  
                  <li>
                      <a class="hvr-shadow-radial" data-toggle="modal" href="#myModal" id="fadeIn">Bio</a>
                  </li>
              </ul>
        </nav>
</div>
<div class="container">
  <div class="modal" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal"></button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body">
            </div>   
            </div>
         </div>
  </div>
</div> 
</body>
</html>

【问题讨论】：

您正在加载 bootstrap.min.js 两次。删除它。试试这个<script type="text/javascript"> $(window).load(function(){ $('#myModal').modal('show'); }); </script>
我试过了，但没有解决。非常感谢您的建议！
你的模态没有合适的容器。看看这个小提琴jsfiddle.net/tLec49wz。这里我有两个模态。一个是我们的，另一个是我的。相应地更新您的代码并让我知道它是否有效

标签： jquery twitter-bootstrap modal-dialog

【解决方案1】：

替换试试

<a class="hvr-shadow-radial" data-toggle="modal" href="#myModal" id="fadeIn">Bio</a>

与

<a href="#" class="hvr-shadow-radial" data-toggle="modal" data-target="#myModal" id="fadeIn">Bio</a>

根据docs.

希望对你有所帮助。

【讨论】：

【解决方案2】：

我要做的是，为所有模式创建一个特定的 php 文件，并确保使用 PHP 的包含将它们导入到其他页面中。

<?
include('path/to/modals.php');
?>

还包括此页面上的所有模态特定 javascript。

并在页面顶部附近添加模态页面。

【讨论】：

【解决方案3】：

非常感谢大家的帮助！我能够弄清楚问题所在。我换了：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>

使用 1.11.2 版，并解决了它。

再次感谢大家！

【讨论】：