0

我正在尝试使用引导程序在网站上实现模式弹出窗口。该站点是部门性的，因此我可以访问的唯一代码基本上是站点的主体（其他所有内容都在 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…&lt;/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 问题？

4

2 回答 2

0

确保不要忘记将 modal-header 、 modal-body 和 modal footer 用<div class="modal-dialog">和<div class="modal-content">

<!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…&lt;/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>
于 2013-11-06T21:18:34.457 回答
0

您可以从 'modal hide fade' 中删除 class hide 并仅添加 modal-content 。剩下的代码做得很完美。

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

于 2016-01-07T05:52:40.867 回答