引导程序模式无法正常运行

Question

我正在尝试使用引导程序在网站上实现模式弹出窗口。 该站点是部门部门，因此我唯一可以访问的代码基本上是该站点的主体（PHP中的其他内容包括页眉，页脚和导航），我也包含了bootstrap.js文件以及jQuery的。 我在引导文档上使用示例代码。 我有引导工具提示和弹出窗口，但无法弄清楚该模式为何不起作用。

<!-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" 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>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

当我单击按钮时，页面背景变暗，但模式对话框中的唯一内容是导航栏（我无权访问该代码），并且代码（#myModal）中的模式对话框未显示在所有。 我不知道发生了什么事。 这是我的第一个Web开发项目。

我希望模式按钮在表单中选择之后

<select class="bootstrap-select" name=display>

    <?php foreach ($digitalSignageDisplays as $display) { ?>

        <option value=<?php echo $display; ?>><?php echo $display; ?></option>

    <?php } ?>

</select>

任何帮助将不胜感激。 可能是Z-index问题吗？

Answer 1

确保不要忘记用<div class="modal-dialog">和<div class="modal-content">来包装modal-header，modal-body和modal footer

<!DOCTYPE html>
<html>
    <head>

    <link href="D:/install/bootstrap-3.0.0/dist/css/bootstrap.min.css" rel="stylesheet"/>

    </head>
<body>

<a href="#myModal" data-toggle="modal" class="btn btn-primary btn-lg" >Launch demo modal</a>

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

    <div class="modal-dialog">

        <div class="modal-content">

            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">Modal header</h3>
            </div><!-- ./modal-header -->


            <div class="modal-body">
                <p>One fine body…</p>
            </div>

            <div class="modal-footer">
                <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
                <button class="btn btn-primary">Save changes</button>
            </div>

        </div><!-- ./modal-content -->

    </div><!-- ./modal-dialog -->

</div><!-- ./modal -->

<script type="text/javascript" src="D:/install/bootstrap-3.0.0/assets/js/jquery.js" ></script>  
    <script type="text/javascript" src="D:/install/bootstrap-3.0.0/dist/js/bootstrap.min.js" > </script>
</body>
</html>

Answer 2

您可以从“模式隐藏淡入淡出”中仅删除类隐藏，而仅添加模式内容。 保留您的代码是完美的。

 <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

引导程序模式无法正常运行

问题描述

2 个解决方案

解决方案1
0 2013-11-06 21:18:34

解决方案2
0 2016-01-07 05:52:40

引导程序模式无法正常运行

问题描述

2 个解决方案

解决方案1 0 2013-11-06 21:18:34

解决方案2 0 2016-01-07 05:52:40

解决方案1
0 2013-11-06 21:18:34

解决方案2
0 2016-01-07 05:52:40