Question

只需尝试创建一个模式，即可放大和模糊背景。基于hakim https://lab.hakim.se/avgrund/

的avgrund

现在，在@deathshadow的帮助下，它也具有嵌套模态，位于codingforums。

这是当前状态： https://jsfiddle.net/postcolonialboy/1jz0q3xk/19/

    <input type="radio" name="modal" id="toggle_modalsOff" class="toggleAll" hidden checked>
    <!--1 Text-->
    <input type="radio" name="modal" id="toggle_modal1" class="toggle" hidden>
    <div>
        <label for="toggle_modalsOff"></label>
    	<div>
    	    <label for="toggle_modalsOff">&#x1F5D9;</label>
    		<label for="toggle_modal1.1">
    		    <img class="inarticle" src="https://dummyimage.com/600x400/e00000/000000"/></label>
    			<p>Modal 1</p>
            </div>
    	</div>
    <!--1 Images-->
    <input type="radio" name="modal" id="toggle_modal1.1" class="toggle" hidden>
    <div>
    	<label for="toggle_modalsOff"></label>
    	<div>
    		<label for="toggle_modal1">&#x1F5D9;</label>
    		<img class="popup" src="https://dummyimage.com/600x400/e00000/000000"/>
    		<p>
    			Caption Image 1
    		</p>
    	</div>
    </div>
    
    <!--2 Text-->
    <input type="radio" name="modal" id="toggle_modal2" class="toggle" hidden>
    <div>
    	<label for="toggle_modalsOff"></label>
    	<div>
    		<label for="toggle_modalsOff">&#x1F5D9;</label>
    		<label for="toggle_modal2.1">
    			<img class="inarticle" src="https://dummyimage.com/600x400/0034de/000000"/></label>
    			<p>
    				Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
    			</p>
    		<label for="toggle_modal2.2">
    			<img class="inarticle" src="https://dummyimage.com/600x400/218f63/000000"/></label>
    	</div>
    </div>
    <!--2 Images-->
    <input type="radio" name="modal" id="toggle_modal2.1" class="toggle" hidden>
    <div>
    	<label for="toggle_modalsOff"></label>
    	<div>
    		<label for="toggle_modal2">&#x1F5D9;</label>
    		<img class="popup" src="https://dummyimage.com/600x400/0034de/000000"/>
    		<p>
    			Caption Image 1
    		</p>
    	</div>
    </div>
    <input type="radio" name="modal" id="toggle_modal2.2" class="toggle" hidden>
    <div>
    	<label for="toggle_modalsOff"></label>
    	<div>
    		<label for="toggle_modal2">&#x1F5D9;</label>
    		<img class="popup" src="https://dummyimage.com/600x400/218f63/000000"/>
    		<p>
    			Caption Image 2
    		</p>
    	</div>
    </div>
    
    
    <!--3 Text-->
    		<input type="radio" name="modal" id="toggle_modal3" class="toggle" hidden>
    		<div>
    			<label for="toggle_modalsOff"></label>
    			<div>
    				<label for="toggle_modalsOff">&#x1F5D9;</label>
    					<p>
    						Modal 3
    					</p>
    					<label for="toggle_modal3.1"><img class="inarticle" src="https://dummyimage.com/600x400/708f22/000000"/></label>
    			</div>
    		</div>
    <!--3 Images-->
    <input type="radio" name="modal" id="toggle_modal3.1" class="toggle" hidden>
    <div>
    	<label for="toggle_modalsOff"></label>
    	<div>
    		<label for="toggle_modal3">&#x1F5D9;</label>
    		<img class="popup" src="https://dummyimage.com/600x400/708f22/000000"/>
    		<p>
    			Caption Image 1
    		</p>
    	</div>
    </div>
    
    
    
    <!--
    Main Page
    -->
    <div id="content"><div id="contentInner">
    	<!--
    		We need the double-wrapper as flex centering screws up scrolling and position on small displays, so the outer wrapper has to provide our
    		scrollbars and the inner one handles the scaling / blur.
    	-->
    	<h1>Depth of Field Test</h1>
    
    
    	<ul class="modalSelect">
    		<li><label for="toggle_modal1">
    		<p>Modal 1</p></label></li>
    
    		<li><label for="toggle_modal2">
    		<p>Modal 2</p></label></li>
    
    		<li><label for="toggle_modal3">
    
    		<p>Modal 3</p></label></li>
    	</ul>
    
    
    <!-- #contentInner, #content --></div></div>

现在，我正在尝试做的是：通过单击嵌套的模态链接，应将所有内容再次推回并进行模糊处理，例如模拟后退层/景深。

我已经附上一张图片来说明这一点：

这是一个大版本：https://ibb.co/LNB83jm

谢谢

Answer 1

您可以通过结合使用filter: blur(3px);和transform: scale(0.8) css属性来实现此目的。

您可以在我刚刚创建的小提琴上看到一个有效的示例：

const container = document.getElementById('container');
const background = document.getElementById('background');
const foreground = document.getElementById('foreground');

let  modalIsVisible = false;

container.addEventListener('click', toggleModal);

function toggleModal() {
  if (modalIsVisible) {
  	hideModal();
    modalIsVisible = false;
  } else {
  	showModal();
    modalIsVisible = true;
  }
}

function showModal() {
	background.classList.add('blur');
  foreground.classList.remove('hidden');
}

function hideModal() {
	background.classList.remove('blur');
  foreground.classList.add('hidden');
}

* {
  box-sizing: border-box;
}

#container {
  position: relative;
  width: 500px;
  height: 500px;
}

#container > div {
  position: absolute;
  width: 100%;
  height: 100%;
  padding: 30px;
  line-height: 2em;
  transition: 0.5s;
}

#background {

  z-index: 1;
  background-color: #ccc;
}

#foreground {
  z-index: 2;
}

.hidden {
  opacity: 0;
}

.blur {
  filter: blur(3px);
  transform: scale(0.8);
}

<div id="container">

<div id="background">
    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
</div>

<div id="foreground" class="hidden">
  I'm visible now!
</div>
</div>

景深效果？

1 个答案: