我注意到如果同时使用 popbox.css 和 bootstrap.css 会出现问题。有人知道解决方案吗? 这是某人的 fiddle ,用于展示 popbox 的工作原理。
http://jsfiddle.net/kbwood/sV4bY/
如果您在 popbox 库之外加载 Bootstrap 库
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
它将不再有效。
这是一个不起作用的例子。删除 bootstrap.min.css 文件以使其工作
<!DOCTYPE html>
<head>
<meta http-equiv='Content-type' content='text/html; charset=utf-8'>
<title>PopBox</title>
<link href="../static/css/popbox.css" type="text/css" rel="stylesheet" media="screen" charset="utf-8">
</head>
<body>
<div class="container">
<h1>PopBox</h1>
<div class='popbox'>
<a class='open' href='#'>
<img src='' style='width:14px;position:relative;'> Click Here!
</a>
<div class='collapse'>
<div class='box'>
<div class='arrow'></div>
<div class='arrow-border'></div>
Content from first popup
</div>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="../static/js/popbox.js" type="text/javascript" charset="utf-8"></script>
<link href="../static/css/bootstrap.min.css" rel="stylesheet">
<script type='text/javascript'>
$(document).ready(function(){
$('.popbox').popbox();
});
</script>
最佳答案
问题是由于您已将 collapse
类应用于 div
。在 Bootstrap 中,这些默认情况下是隐藏的,因为它是 Accordion 功能的一部分。从该 div 中删除该类或为其使用不同的名称。
关于javascript - popbox.css 和 bootstrap.css 之间的名称冲突,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/31442885/