我正在尝试启动一个包含 bx slider 的弹出式 div。 启动弹出 div 的链接工作正常。出现一些文本但 bxslider 内的图像没有出现的弹出窗口也是如此。我认为这是一个 z-index 问题，但似乎不是(或者确实没有设法修复它)。有加载和方向控制图像，但没有图像。
非常感谢您的帮助!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>pop-up with SLIDER </title>
<!-- pop up : CSS -->
<link href="css/styles.css" rel="stylesheet" type="text/css" />
<!-- pop up : jquery -->
<script type="text/javascript" src="js/css-pop.js"></script>
<!-- bxSlider : CSS -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<!-- bxSlider CSS file -->
<link href="css/jquery.bxslider.css" rel="stylesheet" />
<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"> </script>
<!-- bxSlider Javascript file -->
<script src="js/jquery.bxslider.min.js"></script>
<script src="js/monbxslider.js"></script>
</head>
<body>
<div id="container">
<div id="mainContent">
<a href="#" onclick="popup('popUpDiv')">Projet Uranus</a>
<!--POPUP-->
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<h1>Projet Uranus : développement web</h1>
<ul class="bxslider">
<li><img src="images/ordi1.jpeg"/></li>
<li><img src="images/ordi2.jpeg" /></li>
<li><img src="images/ordi3.jpeg" /></li>
</ul>
</div> <!-- END of divpopup-->
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
最佳答案
如果您查看输出代码，您似乎没有为 bx-viewport 设置正确的高度，它的内联高度为 0px:
您需要为其设置一些高度，以便显示图像，目前 overflow: hidden 隐藏了它们
但您脚本的核心问题实际上是在初始加载时 DIV#popUpDiv 具有 display: none 的内联样式，这意味着 bxslider无法获取图像的尺寸，因此默认情况下它会变为 0px，即您看到的高度问题。只有当 ul.bxslider 在 DOM 中可见时，您才需要创建 bxslider，否则组件无法执行此操作。
演示如何做到这一点的一种快速而肮脏的方法是:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>MA pop-up avec SLIDER !!</title>
<!-- pop up : CSS -->
<link href="http://s547036800.onlinehome.fr/css/styles.css" rel="stylesheet" type="text/css" />
<!-- pop up : jquery -->
<script type="text/javascript" src="http://s547036800.onlinehome.fr/js/css-pop.js"></script>
<!-- bxSlider : CSS -->
<link href="http://s547036800.onlinehome.fr/css/jquery.bxslider.css" rel="stylesheet" />
<!-- bxSlider CSS file -->
<link href="http://s547036800.onlinehome.fr/css/jquery.bxslider.css" rel="stylesheet" />
<!-- jQuery library (served from Google) -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="http://s547036800.onlinehome.fr/js/jquery.bxslider.min.js"></script>
<!-- <script src="http://s547036800.onlinehome.fr/js/monbxslider.js"></script> -->
<script type="text/javascript">
function popup2(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
$(".bxslider").bxSlider();
}
</script>
</head>
<body>
<div id="container">
<div id="mainContent">
<!-- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quis tempore sapiente sed ut, ex fugit eaque enim laborum rem et similique. Tempora adipisci, facilis aliquid nesciunt perferendis quas dolorum optio! </p> -->
<a href="#" onclick="popup2('popUpDiv')">Projet Uranus</a>
<!--POPUP-->
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<h1>Projet Uranus : développement web</h1>
<!--<img src="http://placekitten.com/800/400" alt="un gros chat" /> -->
<!-- <div> class="bx-wrapper" ? -->
<ul class="bxslider">
<li><img src="http://s547036800.onlinehome.fr/images/ordi1.jpeg"/></li>
<li><img src="http://s547036800.onlinehome.fr/images/ordi2.jpeg" /></li>
<li><img src="http://s547036800.onlinehome.fr/images/ordi3.jpeg" /></li>
</ul>
<!-- </div> -->
<div id="contexte">
<h2>CONTEXTE</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab, odit, omnis! Quas quo, excepturi explicabo nisi consectetur modi mollitia vero aliquam enim eos dolorem, provident pariatur tenetur cumque? Vel, tenetur? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam corporis fugit laborum sed ab, cum veritatis omnis laudantium odio dolore, sunt quidem est itaque quaerat nihil deleniti placeat eligendi vero.</p>
</div>
<div>
<h2>APPROCHE </h2>
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero, id, ipsa. Dicta ratione eos adipisci nemo aspernatur totam fugit, mollitia praesentium magnam doloremque tempora architecto a, accusamus soluta nostrum Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt dignissimos veritatis id eligendi voluptatum ullam, sint amet non et, ea laborum illo sit quae distinctio accusantium ipsam. Cum, consequatur, animi.</p>
</div>
<aside>
<div class="site">
<a href="http://google.fr/" target="_blank" >SEE THE WEBSITE</a>
</div>
<div class="retour">
<a href="#realisations" onclick="popup('popUpDiv')">BACK</a>
</div>
</aside>
</div> <!-- fin du contenu de divpopup-->
<!-- end #mainContent --></div>
<!-- end #container --></div>
</body>
</html>
如您所见，我注释掉了 monbxslider.js 并在文档加载时激活了 bxslider，并在我添加的 popup2() 方法中激活了它，现在它工作正常。
当然你需要为此制作一个干净的版本，但这是你需要做的事情的基本思想。
编辑: 通常我不会这样做，但如果您愿意，可以使用此脚本作为您的popup 方法:
var ImageSlider = null;
function popup2(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
if(ImageSlider == null) {
ImageSlider = $(".bxslider").bxSlider();
}
}
但仍然需要删除monbxslider.js中bxslider的所有激活码
关于javascript - 弹出 div 中的 Bxslider，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28239290/