单击顶部图像，显示模态和另一个图像（模态后面）答案

【问题标题】：On click top image, show modal and another image (behind modal)单击顶部图像，显示模态和另一个图像（模态后面）
【发布时间】：2018-01-11 10:25:21
【问题描述】：

我正在处理一个可以找到图像（顶部的红色框）的页面 - 在它后面有一个引导模式（黄色框）。

所以，我要做的是：当我点击红色框时，这个（红色框）消失并且显示黄色框......但我需要 BLACK BOX（也是图像）出现在 YELLOW BOX 后面。

我通过一些 jquery 以某种方式实现了这一点，但由于黑匣子将成为图像，它必须像顶部图像一样响应小型设备（事实并非如此）。这是我遇到一些麻烦的部分，我需要你的帮助:)

$(document).on('click', '#video', function() {
    $('#form_init').hide();
    $('.video').hide();
    $('#form_init').show().css({
        "background-image": "url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded)",
        "background-size": "contain",
        "margin": "0 auto",
        "z-index": "999",
        "width": "40vw",
        "height": "47vw",
        "position": "relative"
    })
});

.video {
	background-image: url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: block;
	margin: 0 auto;
	width: 100%;
	height: 123vw;
	z-index: 9999;
	position: relative;
}

@media screen and (min-width: 451px) {
	.video {
		background: url(http://i.stack.imgur.com/oURrw.png) #1E1E1E;
		background-repeat: no-repeat;
		display: block;
		margin: 0 auto;
		background-size: contain;
		width: 40vw;
		height: 47vw;
		z-index: 9999;
		position: relative;
	}
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="form_init">
    <div class="video" id="video"></div>
    <!--IMAGE AT THE TOP-->
</div>

<div id="modal" class="modal in" role="dialog"></div>
<!-- BOOTSTRAP MODAL -->

JSFIDDLE：

FIDDLE HERE

【问题讨论】：

所以一开始只显示红色图片，点击后 - 它消失了，黄色和黑色都出现了？
没错！这里唯一的事情是我需要模态背后的图像也具有响应性，但我认为我的解决方案没有太大帮助:(
嘿，你能把它放到 JSFiddle 中并提供一个链接吗？ @蒂米
好的，请稍等
jsfiddle.net/23hqmasy@lakshman_dev

标签： jquery html css responsive

【解决方案1】：

同时，我找到了解决办法！

在.show() 之后我添加了.addClass() 和.video-loading 类：

$(document).on('click', '#video',function(){    
     $('#form_init').hide();
     $('.video').hide();
     $('#form_init').show().addClass('video-loading').css({
       "background-image": "url(https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon@2.png?v=73d79a89bded)",
       "background-repeat": "no-repeat",
       "background-size": "contain",
       "margin": "0 auto",
       "z-index": "999",
       "width": "100%",
       "height" : "75vh",
       "position" : "relative"})
});

然后，在 CSS 和 @media screen and (min-width: 451px) 内部：

.video-loading {
    width: 40vw !important;
    height: 47vw !important;
    margin-top: 0 !important;
 }

【讨论】：

【解决方案2】：

在您编写的媒体查询中尝试display: block !important;，因为我看到它被display: none; 被用户代理样式覆盖

【讨论】：

感谢您的帮助@lakshman_dev，但这里的问题是模态背后的图像。它不像顶部图像那样响应迅速，我希望它们都具有同样的响应能力。
在您为min-width: 451px; 编写的媒体查询中尝试display: block !important;，因为我看到它被display: none; 覆盖，被用户代理样式覆盖。 @蒂米