Question

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

<!-- 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指数问题吗？

Answer 1

请确保您不要忘记使用<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…</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

你可以删除类隐藏＆＃39;模态隐藏淡入淡出＆＃39;并添加模态 - 内容。保留您的代码是完美的。

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

＆＃13;

bootstrap模态不正常

2 个答案: