Javascript 弹出式div中的Bxslider_Javascript_Jquery_Css_Popup_Bxslider

Javascript 弹出式div中的Bxslider

javascript jquery css

Javascript 弹出式div中的Bxslider,javascript,jquery,css,popup,bxslider,Javascript,Jquery,Css,Popup,Bxslider,我正在尝试启动一个弹出式div，其中将包含一个bx滑块。启动弹出div的链接工作正常。弹出窗口也会显示一些文本，但bxslider中的图像不会显示。我认为这是一个z指数问题，但似乎不是（或者说没有设法解决它）。加载和方向控制图像存在，但图像不存在非常感谢你的帮助 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transi

我正在尝试启动一个弹出式div，其中将包含一个bx滑块。启动弹出div的链接工作正常。弹出窗口也会显示一些文本，但bxslider中的图像不会显示。我认为这是一个z指数问题，但似乎不是（或者说没有设法解决它）。加载和方向控制图像存在，但图像不存在

非常感谢你的帮助

<!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视口

如果查看输出代码，它的内联高度为0px：

您需要为其设置一些高度，以便图像显示，当前

溢出：隐藏将其隐藏
但脚本的核心问题实际上是，在初始加载时，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
的所有激活代码，谢谢Idra！因此，我想我必须在bxslider的js文件中更改它？@LaëtitiaCook我以一种快速而肮脏的方式添加了如何做到这一点，以演示您需要做什么我理解您的意思，但无法使链接继续工作@LaëtitiaCook你和我用的代码完全一样吗？我的意思是，您确实像我一样从代码中删除了monbxslider.js
，并在代码中添加了popup2（）方法？如果您只是将pase my solution复制到一个空的HTML文件中，那么您应该已经看到它正在工作。是的，当我复制/粘贴您的代码时，我确实看到它在工作，但无法按照您所说的正确编码。对不起，我不太适应js；或者我应该只在html中这样保存它吗？
    var ImageSlider = null;
    function popup2(windowname) {
        blanket_size(windowname);
        window_pos(windowname);
        toggle('blanket');
        toggle(windowname);     
        if(ImageSlider == null) {
            ImageSlider = $(".bxslider").bxSlider();
        }
    }