BXslider 弹窗问题 - 高度问题答案

【问题标题】：BXslider popup window issue - height problemsBXslider 弹窗问题 - 高度问题
【发布时间】：2015-05-12 11:40:43
【问题描述】：

我正在使用 bxslider，使用响应式设计、多个滑块和一个弹出窗口。问题。我有多个滑块工作和重新调整浏览器大小。问题在于弹出窗口。弹出窗口会切断图像。

注意：我的javascript技能非常有限，所以请尽可能解释。对于像我这样的非编码人员来说，示例总是最好的。

这篇文章：Bxslider in a pop up div ... 引用了高度为 0px 的 bx-viewport（因为初始图像被隐藏了）。因此，javascript 尝试获取初始图像大小，但由于未显示图像而失败（无图像 = 无图像高度）。一旦显示第二张图像（由于 bxslider 自动播放），问题就会自行解决。

我尝试在Bxslider in a pop up div 上使用该解决方案，但它不适用于我的代码（它引用了我不使用的 monbxslider.js）。

所以，我知道是什么导致了问题......但不知道如何解决它。我尝试过使用这些样式，但这不起作用。固定高度不起作用，因为每个滑块都不同，并且可能有不同的图像。下面是我的代码的 sn-ps....

标头 Javascript 信息...

<link href="/js/jquery.bxslider.css" rel="stylesheet"></script>
<script type="text/javascript" src="/js/jquery.min.js"></script>
<script type="text/javascript" src="/js/jquery.bxslider.min.js"></script>


<!-- Popup Toggle -->
<script type="text/javascript">
function toggle_menu(id) {
    var e = document.getElementById(id);
    if (e.style.display == 'block') e.style.display = 'none';
    else e.style.display = 'block';
}
</script>

弹窗样式

    [id^="popup-"], div[id*=" popup-"] { 
      display:none;
    }

    .window {   
        display:block;
        background:white;
        position:fixed;
        top:0; left:0;
        margin:50px 5% 0 5%; 
        width:90%;
        z-index: 1001;
      } 

      .window .close {
      width: 22px; height: 22px; background: #000; border-radius: 50%; border: 3px solid #fff; display: block; text-align: center; color: #fff; text-decoration: none; position: absolute; top: -10px; right: -10px; z-index: 1002;}
      .window .bx-viewport { min-height:200px !important; }
      .window .bx-viewport ul li img { width:100% !important; padding:10px; }
      .window .bx-viewport ul li { width:100% !important; }
    .windowoverlay { 
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background:rgba(0,0,0,0.8);
        opacity:0.8;
        filter:alpha(opacity=80);
        z-index: 1000;
       }

BxSlider CSS

/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */


/** RESET AND LAYOUT
===================================*/

.bx-wrapper {
    position: relative;
    margin: 0 auto;
    padding: 0;
    /* *zoom: 1; */
}

.bx-wrapper img {
    max-width: 100%;
    display: block;
}

/** THEME
===================================*/

.bx-wrapper .bx-viewport {
    background: #fff;

    /*fix other elements on the page moving (on Chrome)*/
    -webkit-transform: translatez(0);
    -moz-transform: translatez(0);
        -ms-transform: translatez(0);
        -o-transform: translatez(0);
        transform: translatez(0);
}

.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
    position: absolute;
    bottom: -30px;
    width: 100%;
}

/* LOADER */

.bx-wrapper .bx-loading {
    min-height: 50px;
    background: url(../images/bx_loader.gif) center center no-repeat #fff;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2000;
}

/* PAGER */

.bx-wrapper .bx-pager {
    text-align: center;
    font-size: .85em;
    font-family: Arial;
    font-weight: bold;
    color:#999;
    padding-top: 20px;
}

.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
    display: inline-block;
    *zoom: 1;
    *display: inline;
}

.bx-wrapper .bx-pager.bx-default-pager a {
    background: #999;
    text-indent: -9999px;
    display: block;
    width: 10px;
    height: 10px;
    margin: 0 5px;
    outline: 0;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
    background: #FFF;
}

/* DIRECTION CONTROLS (NEXT / PREV) */

.bx-wrapper .bx-prev {
    left: 10px;
    background: url(../images/controls.png) no-repeat 0 -32px;
}

.bx-wrapper .bx-next {
    right: 20px;
    background: url(../images/controls.png) no-repeat -43px -32px;
}

.bx-wrapper .bx-prev:hover {
    background-position: 0 0;
}

.bx-wrapper .bx-next:hover {
    background-position: -43px 0;
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 33px;
    height: 31px;
    text-indent: -9999px;
    z-index: 9999;
}

.bx-wrapper .bx-controls-direction a.disabled {
    display: none;
}

/* AUTO CONTROLS (START / STOP) */

.bx-wrapper .bx-controls-auto {
    text-align: center;
    display:none; /*Hide Stop Button*/ 
}

.bx-wrapper .bx-controls-auto .bx-start {
    display: block;
    text-indent: -9999px;
    width: 10px;
    height: 11px;
    outline: 0;
    background: url(../images/controls.png) -86px -11px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
    background-position: -86px 0;
}

.bx-wrapper .bx-controls-auto .bx-stop {
    display: inline-block;
    text-indent: -9999px;
    width: 9px;
    height: 11px;
    outline: 0;
    background: url(../images/controls.png) -86px -44px no-repeat;
    margin: 0 3px;
}

.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
    background-position: -86px -33px;
}

/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
    position:absolute;
    bottom:10px;
    text-align: center;
    margin:0 auto;
}

.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
    right: 0;
    width: 35px;
}

/* IMAGE CAPTIONS */

.bx-wrapper .bx-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #666\9;
    background: rgba(80, 80, 80, 0.75);
    width: 100%;
}

.bx-wrapper .bx-caption span {
    color: #fff;
    font-family: Arial;
    display: block;
    font-size: .85em;
    padding: 10px;
}

HTML

<a href="javascript:void(0)" onclick="toggle_menu('popup-1">
<img src="/images/Feature1_300x300.jpg" alt="" />
</a>

<!-- Popup -->          
<script type="text/javascript">
$(document).ready(function(){
    $('#slider1').bxSlider({
      mode: 'fade',
      auto: true,
      autoControls: true,
      pause: 90000,
      adaptiveHeight: true
    });
});
</script>
<div class="popup" id="popup-1">

    <div class="window">        
        <a href="#" onclick="toggle_menu('popup-1');">
            <div class="close">X</div>
        </a>

        <!-- Slider -->
        <ul id="slider1">
          <li><img src="/images/Feature1.jpg" /></li>
          <li><img src="/images/Feature2.jpg" /></li>
          <li><img src="/images/Feature3.jpg" /></li>
        </ul>
    </div>

    <div class="windowoverlay"></div>
</div>
<!-- Popup END -->

这里是网站。向下滚动并单击弹出窗口的货车图像： http://www.amazingdg.com/clients/testsite/

现在弹出窗口以 display:none 开始。我尝试使显示可见，并定位“屏幕外”，然后在单击时将弹出窗口“移动”到可见屏幕上。但是，高度仍然无法识别。有人有一些想法吗？

【问题讨论】：

标签： javascript popup bxslider

【解决方案1】：

想办法……

当我调用弹出窗口时，我会在显示弹出窗口时激活滑块（将 display:none 更改为 display:block）。我在调用弹出窗口之前就这样做了，这就是问题所在。所以弹出的时候会激活图片的“高度”，然后再运行滑块。

<script type="text/javascript">
    function popupwin(Id) {
        var winname = document.getElementById(Id);
        if (winname.style.display == 'block') {
            winname.style.display = 'none';
        } else {
            winname.style.display = 'block';     
            $('#slider<?php echo $slidr; ?>').bxSlider({
              mode: 'fade',
              auto: true,
              autoControls: true,
              pause: 90000,
              adaptiveHeight: true
            });
        }
    }
</script>

【讨论】：