个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
26
4
我使用 w3school 中的模态，如果我在页面正文中放置调用模态的按钮，则效果很好，但如果我在 Bootstrap 导航栏下拉列表中放置按钮，则它不起作用。它是开放模式，但会立即关闭。显然模态与下拉菜单同时关闭，但我不知道如何。
有人知道这个问题的解决方案吗？
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<div id="navbar" class="navbar-collapse collapse">
<ul class="nav navbar-nav navbar-right white nav-rlm">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
<i>Admin</i>
<i class="glyphicon glyphicon-user"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu dropdown-user">
<li>
<a href="<?php echo base_url(''); ?>"><button id="myBtn">Open Modal</button><i class="glyphicon glyphicon-flag text-primary"></i> About</a>
</li>
</ul>
</li>
</ul>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</body>
</html>
最佳答案
开放模态 <button>位于 anchor 元素内 <a>这不是有效的 HTML5 语法:
<a href="<?php echo base_url(''); ?>">
<button id="myBtn">Open Modal</button><i class="glyphicon glyphicon-flag text-primary"></i> About
</a>
话虽如此，您可以将 JavaScript 更改为:
// When the user clicks the button, open the modal
btn.onclick = function(e) {
e.preventDefault();
modal.style.display = "block";
}
防止 anchor 上的点击事件重定向。然而，更好的方法是完全删除该按钮:
<ul class="dropdown-menu dropdown-user">
<li>
<a id="myBtn" href="<?php echo base_url(''); ?>"><i class="glyphicon glyphicon-flag text-primary"></i> About</a>
</li>
</ul>
这是一个实例:
http://www.bootply.com/W8ESbhIkcd
有点偏离主题，您是否考虑过使用内置的 Bootstrap 模式？
http://getbootstrap.com/javascript/#modals
关于javascript - Bootstrap 导航栏中的模式，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39209076/
26
4
0
我在让我的操作栏显示图标时遇到问题。它显示了我在溢出菜单中设置的文本/标题(三个点)，但没有任何操作。这是我的代码，我错过了什么？ MainActivity.java public class Mai
我正在尝试在 android 中制作一个动态操作栏，现在我正在尝试像这样在操作栏中进行搜索。 http://developer.android.com/images/ui/actionbar-sear
我正在编写 uiautomator 测试，但我很难弄清楚如何单击我的操作栏图标。 如果我的操作是“始终”显示，则很容易找到并点击。 如果我的操作是显示“从不”，我必须单击菜单，然后从菜单中单击。先点击
我有一个正在寻找特定 URI 的重写规则。当它匹配特定的 URL 时，它会使用正确的文件路径重写它，以便可以找到所需的内容。然后它将协议(protocol)更改为 HTTPS 并允许请求通过。 我有两
我正在为 android 中的 ActionBar 而苦苦挣扎。 这是我的问题:我的操作项没有显示在操作栏中，而是堆叠在操作溢出中，无论我做什么.. 我花了一天的时间寻找解决方案，但我似乎找不到缺少的
我的网络应用程序在 Tomcat 下运行，它非常密集地使用 AJAX 请求，在开发过程中我也必须密集地重新部署网络应用程序。重新部署后，我通常会简单地刷新页面，知道用户 session 已删除，但我总
我是一名优秀的程序员,十分优秀！