引导模式不能正常工作
引导模式不能正常工作
提问于 2013-11-02 04:06:03
我正在尝试使用bootstrap在网站上实现一个模式弹出窗口。这个站点是部门级的，所以我唯一能访问的代码基本上就是站点的主体(其他的都在php中，包括页眉、页脚和导航)，我已经包含了bootstrap.js文件以及jquery。我在bootstrap文档中使用了示例代码。我已经让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之后
<select class="bootstrap-select" name=display>
<?php foreach ($digitalSignageDisplays as $display) { ?>
<option value=<?php echo $display; ?>><?php echo $display; ?></option>
<?php } ?>
</select>任何帮助都将不胜感激。这会不会是Z索引的问题？
回答 2
Stack Overflow用户
发布于 2013-11-07 05:18:34
确保你没有忘记用<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>Stack Overflow用户
发布于 2016-01-07 13:52:41
你可以从'modal hide fade‘中删除仅隐藏的类，只添加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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/19734547
复制相关文章
相似问题
腾讯云开发者
