Question

我想要一个仅在onload时出现的弹出窗口。我正在使用magnific popup 该脚本正在运行，但它在弹出窗口中显示错误，指出“无法加载图像”。不确定我需要使用的最佳'type'是什么。

HTML：

<div id="pop">
<img src="something.jpg">
</div>

SCRIPT：

jQuery(window).load(function(){
jQuery.magnificPopup.open({
  items: {src: '#pop'},type: 'image'}, 0);
});

CSS：

#pop {display:none;}

Answer 1

这是你应该如何使用magnificPopup库：

case

select t.*,
       (case when t.revenue = tt.revenue then 'A' end) as type
from t join
     (select customer, max(revenue) as maxr
      from t
      group by customer
     ) tt
     on t.customer = tt.customer;

jQuery(window).load(function(){
  jQuery.magnificPopup.open({
    items: {
      src: '#pop',
      type: 'inline',
    },
    type: 'image'
  }, 0);
});

一些变化：

如果您使用不是图像的元素作为项目，则应指定类型：inline
#pop {display:none;} .mfp-content #pop {display:block;}仍然应用于magnificPopup中的元素事件，因此当它放在magnificPopup包装器中时，我为该元素添加了<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css"> <div id="pop"> <img src="http://www.w3schools.com/images/colorpicker.png"> </div>。

另一个选择是使用display: hidden元素内的图像：

display: block

#pop

jQuery(window).load(function(){
  jQuery.magnificPopup.open({
    items: {
      src: $('#pop img').attr('src')
    },
    type: 'image'
  }, 0);
});

Answer 2

您在magnifyPopup.open()上呼叫<div>，而不是<img />。尝试直接在图像上调用它。

<div id="pop">
    <img src="something.jpg" id="img" />
</div>

<script type="text/javascript">
    jQuery(window).load(function(){
        jQuery.magnificPopup.open({
            items: {
                src: '#img'
            },
            type: 'image'
        });
    });
</script>

popup onload没有显示

2 个答案: