弹出窗口中的 Bxslider div

Question

我正在尝试启动一个包含 bx 滑块的弹出窗口 div。启动弹出 div 的 link 工作正常。出现一些文本但 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>

Answer 1

如果您查看输出代码，它表明您没有将正确的高度设置为 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 的所有激活码

弹出窗口中的 Bxslider div

Bxslider in a pop up div

javascript

css

jquery

popup

bxslider