模态不会出现在网页上

Question

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

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

这是代码：

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

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

希望对您有所帮助。

Answer 2

我会做的是，创建一个特定于所有模态的 php 文件，并确保使用 PHP 的 include 将它们导入到您的其他页面。

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

在此页面上也包括所有特定于模式的 javascript。

并在页面顶部附近包含模态页面。

Answer 3

非常感谢大家的帮助！我能够弄清楚问题是什么。我替换了：

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

使用版本 1.11.2 并处理了它。

再次感谢大家！

模态不会出现在网页上

Modal won't come up on webpage

jquery

modal-dialog

twitter-bootstrap