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

Question

I'm trying to implement a modal popup on a site using bootstrap. 我正在尝试使用引导程序在网站上实现模式弹出窗口。 The site is departmental so the only code I've got access to is the body of the site basically (everything else is in php includes for the header, footer, and navigation) I've got the bootstrap.js file included as well as jquery. 该站点是部门部门，因此我唯一可以访问的代码基本上是该站点的主体（PHP中的其他内容包括页眉，页脚和导航），我也包含了bootstrap.js文件以及jQuery的。 I'm using the example code on the bootstrap docs. 我在引导文档上使用示例代码。 I've got bootstrap tooltips and popovers working but can't figure out why the modal won't work. 我有引导工具提示和弹出窗口，但无法弄清楚该模式为何不起作用。

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

When I click the button, the page gets backdropped but the only thing in the modal dialog is the navigation bar (I don't have access to the code for that) and the modal dialog in my code (#myModal) is not displayed at all. 当我单击按钮时，页面背景变暗，但模式对话框中的唯一内容是导航栏（我无权访问该代码），并且代码（#myModal）中的模式对话框未显示在所有。 I have no idea what's going on. 我不知道发生了什么事。 This is one my first web development projects. 这是我的第一个Web开发项目。

I want the modal button to be after a select in a form 我希望模式按钮在表单中选择之后

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

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

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

    <?php } ?>

</select>

Any help would be greatly appreciated. 任何帮助将不胜感激。 Could it be a Z-index problem? 可能是Z-index问题吗？

Answer 1

Make sure you don't forget to wrap your modal-header , modal-body and modal footer with <div class="modal-dialog"> and <div class="modal-content"> 确保不要忘记用<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

you Can remove just class hide from 'modal hide fade' and add just modal - content . 您可以从“模式隐藏淡入淡出”中仅删除类隐藏，而仅添加模式内容。 Remaining your code is done perfect. 保留您的代码是完美的。

 <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