Question

我正在使用jQuery CustomBox模式，一切正常。但是，我试图在弹出后“隐藏”模态背后的内容div。然后我希望在模态关闭后再次出现内容div。以下是工作示例：

我刚刚从css-tricks中观看jQuery视频，但仍然在尝试让它工作时遇到问题:)非常感谢任何帮助！

编辑：我想通过模态屏幕以外的模态以及实际的＆＃39; x＆＃39;来重新显示div。按钮。

编辑：实际网页为here

点击“点击我”，你可以看到模态弹出正常，但是，我只想显示地窖的背景图片，而不是它下面的页面。

有什么建议吗？谢谢！

Answer 1

  $(document).ready(function(){
    $("#fadein").click(function(){
      $("#foo").hide();
    });
    $("#showFoo").click(function(){
      $("#foo").show();
    });
  });

DEMO

修改

HTML

<button type="button" class="close" id="close-mod" onclick="$.fn.custombox('close'); myfunction();">&times;</button>

JS

function myfunction() {
    $("#foo").show();
};

$(document).ready(function(){
   $("#fadein").click(function(){
     $("#foo").hide();
   });
});

DEMO

CSS编辑为.custombox-overlay

的背景颜色不透明度

Final DEMO

.custombox-show ~ .custombox-overlay {
  background-color: black !important;
  opacity:1;
}

Answer 2

所以我明白了。我所要做的就是像这样放置地窖图像并且它起作用。我知道它可能不是最好的解决方案，但我很乐意：）

.custombox-show ~ .custombox-overlay {
    opacity: 1;
    background: url(../images/img.jpg) no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

弹出模态时删除背景

2 个答案: