Javascript 使嵌套div全屏显示
知道如何将缩略div拉伸到全屏吗?我尝试了几种方法,最接近我想要的输出是通过使用类容器将父div的innerHTML设置为隐藏div的内容,但我仍然必须将其还原并添加一些动画,以避免发生如此突然的更改。基本上我希望缩略图div在Y轴上旋转,在它的背面可以找到一些信息。在Y轴旋转完成后,我希望它全屏显示(像弹出窗口一样),并有一个X按钮关闭,使一切恢复正常 下面是HTML、CSS和JS(如果没有添加整个HTML,它将是多余的) JS: TLDR;) 您只需将元素的Javascript 使嵌套div全屏显示,javascript,html,css,innerhtml,Javascript,Html,Css,Innerhtml,知道如何将缩略div拉伸到全屏吗?我尝试了几种方法,最接近我想要的输出是通过使用类容器将父div的innerHTML设置为隐藏div的内容,但我仍然必须将其还原并添加一些动画,以避免发生如此突然的更改。基本上我希望缩略图div在Y轴上旋转,在它的背面可以找到一些信息。在Y轴旋转完成后,我希望它全屏显示(像弹出窗口一样),并有一个X按钮关闭,使一切恢复正常 下面是HTML、CSS和JS(如果没有添加整个HTML,它将是多余的) JS: TLDR;) 您只需将元素的宽度和高度分别设置为100vw和1
宽度
和高度
分别设置为100vw
和100vh
演示:
document.querySelector(“div”).addEventListener(“单击”,函数(){
this.classList.toggle(“活动”);
});代码>
div{
背景色:aliceblue;
边框:1px纯黑;
框大小:边框框;
位置:绝对位置;
左:50%;
}
活动分区{
宽度:100vw;
高度:100vh;
位置:绝对位置;
排名:0;
左:0;
}
单击展开
要全屏显示哪个div
?你说的全屏是指隐藏浏览器的地址栏和操作系统chrome吗。或者,你是说整页吗?在所有带有class=“thumbnail”的div中,有一个div的样式看起来像一个加号。单击此加号后,我希望父div旋转,然后全屏显示。我所说的全屏是指浏览器窗口(整页)。我不想隐藏地址栏或任何东西。这解决了一些问题,谢谢。但我仍然需要移动最左上角的整个内容,这样扩展的div就可以覆盖整个页面,而不会出现任何横向的变化scrolling@Shobolan没问题。只需使用绝对定位。我会更新答案。这就是问题所在。通过使用绝对定位,缩略图div不再在父对象(即)内受到约束,但当将top和left设置为0时,它将转到div witch class=“container”的顶部和左侧部分,而不是身体的顶部和左侧部分。如果父对象本身是绝对定位的,它将只转到父对象的左上方。如果没有,它将被定位在身体的左上角。耶,找到问题了。我将父对象的位置设置为“相对”。谢谢你,伙计。
<div class="container">
<div class="info-review">
<p>Latest Version: 6.2.4<br/>
Catia<br/>
Last : 02.07.2013</p>
</div>
<div class="row flex">
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="assets/img/Contact.jpg">
<p>1<sup>st</sup> level support<div class="boxed-plus" aria-hidden="true"></div></p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="assets/img/support.jpg">
<p>1<sup>st</sup> level support<div class="boxed-plus" aria-hidden="true"></div></p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="assets/img/license.jpg">
<p>1<sup>st</sup> level support<div class="boxed-plus" aria-hidden="true"></div></p>
</div>
</div>
<div class="col-lg-3 col-md-4 col-sm-6">
<div class="thumbnail">
<img src="assets/img/application.jpg">
<p>1<sup>st</sup> level support<div class="boxed-plus" aria-hidden="true"></div></p>
</div>
</div>
</div> <!-- row -->
</div> <!-- container -->
<div id="info1"><p> BASE: ENGAGE IN THE HOME CARE-RELATED ACTIVITY (H_HOMEACTIVITIES=6)16_6. What do you do first in order to...? Select one.Look for inspiration (e.g., for closet organization)ONLY SHOW IF SELECTED AT Q15_6. SHOW IN SAME ORDER.IF ONLY ONE ANSWER SELECTED FOR ITEM/QUESTION AT Q15_6, AUTOCODE THAT OPTION AT HERE AND DO NOT SHOW THIS QUESTION.<div class="boxed-plus" aria-hidden="true"></div> </p> </div>
* {
box-sizing: border-box;
}
html {
height: 100%;
width: 100%;
}
body {
margin: 0;
height: 100%;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
padding-top: 115px;
background: #143872; /* fallback for old browsers */
background: -webkit-linear-gradient(#1d355b, #4a83e0, #143872); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#1d355b, #4a83e0, #143872); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
.container {
width: 95%;
margin-left: auto;
margin-right: auto;
padding-right: 15px;
padding-left: 15px;
}
.navbar {
overflow: hidden;
background-color: inherit;
margin-bottom: 20px;
position: fixed;
width: 100%;
top: 0;
z-index: 1030;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
border-top: none;
background: #143872; /* fallback for old browsers */
background: -webkit-linear-gradient(#1d355b, #4a83e0, #143872); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#1d355b, #4a83e0, #143872); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}
@media(max-width: 600px){
.navbar{
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
}
}
.navbar a {
float: left;
font-size: 15px;
color: white;
text-align: center;
padding: 14px 14px 16px 0;
text-decoration: none;
vertical-align: middle;
}
.navbar-header table{
text-align: left;
font-size: 18px;
line-height: 1;
}
.navbar a:hover {
color: #10203a;
}
.navbar-right{
float: right;
}
.navbar a img{
float:left;
}
.dropmenu{
transition: all .5s ease;
height: 50px;
overflow: hidden;
padding: 0;
display: inline-block;
}
@media(max-width: 547px){
.navbar a{
padding: 0;
}
.navbar-right{
float: none;
}
.dropmenu{
margin: 0;
}
}
.dropmenu:hover {
height: 100px;
}
.dropmenu a{
text-decoration: none;
color: white;
padding: 0;
}
.dropmenu table{
height: 50px;
}
.lang{
padding-bottom: 10px;
}
.dropmenu li{
display: block;
border: none;
padding: 0;
height: 50px;
}
.info-review{
padding: 0 15px;
text-align: center;
margin: 0 auto 30px auto;
border-radius: 6px;
color: white;
border: 1px dashed white;
border-top-left-radius: 85px;
border-bottom-right-radius: 85px;
}
@media(min-width: 500px){
.container .info-review{
width: 40%;
}
}
.info-review p{
margin-bottom: 15px;
font-size: 30px;
line-height: 1.4;
}
@media(max-width: 900px){
.info-review p{
font-size: 25px;
}
}
.arrow-down {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid white;
}
.selection-arrow {
padding-top: 17px;
}
.thumbnail {
overflow: auto;
display: block;
padding: 4px;
margin-bottom: 20px;
border: 1px solid #ddd;
border-radius: 4px;
-webkit-transition: border .2s ease-in-out;
-o-transition: border .2s ease-in-out;
transition: border .2s ease-in-out;
-webkit-transform: perspective(500);
-webkit-transform-style: preserve-3d;
-webkit-transition: .5s;
}
.thumbnail > img {
display: block;
height: auto;
max-width: 100%;
margin-left: auto;
margin-right: auto;
border-radius: 6px;
}
.thumbnail p{
color:white;
margin: 2px 0 0 0;
float: left;
}
.thumbnail > div{
max-width: 100%;
}
.row {
margin-left: -15px;
margin-right: -15px;
}
.flex {
display: flex;
flex-wrap: wrap;
}
.col-md-4, .col-lg-3, .col-sm-6{
float: left;
position: relative;
min-height: 1px;
padding-left: 15px;
padding-right: 15px;
}
@media(min-width: 600px){
.col-sm-6{
width: 50%;
}
}
@media(min-width: 900px){
.col-md-4{
width: 33.33333333%;
}
}
@media (min-width: 1200px){
.col-lg-3{
width: 25%;
}
}
.white-popup {
position: relative;
background: #FFF;
padding: 25px;
width:auto;
max-width: 400px;
margin: 0 auto;
}
.active {
background-color: white;
-webkit-transform: rotateY(180deg) translateY(-3em) translateZ(3em);
}
.active > p {
-webkit-transform: rotateY(-180deg);
color: red;
-webkit-transition: .5s;
float: right;
}
img {
-webkit-transition: .5s;
}
figure:hover img {
box-shadow: none;
}
figcaption {
background-color: white;
visibility: hidden;
border: 1px dashed white;
z-index: 99 !important;
}
figure:hover figcaption {
visibility: visible;
box-shadow: 0 20px 15px -10px hsla(0,0%,0%,.25);
margin: 100px auto;
}
.boxed-plus {
cursor: pointer;
float: right;
border-radius: 20%;
width: 25px;
height: 25px;
background: #143872; /* fallback for old browsers */
background: -webkit-linear-gradient(#1d355b, #4a83e0, #143872); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(#1d355b, #4a83e0, #143872); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
position: relative;
display: inline-block;
margin-top: 1px;
}
.boxed-plus::after {
content: " ";
position: absolute;
display: block;
background-color: #fff;
height: 5px;
margin-top: -2.5px;
top: 50%;
left: 5px;
right: 5px;
z-index: 9;
}
.boxed-plus::before {
content: " ";
position: absolute;
display: block;
background-color: #fff;
width: 5px;
margin-left: -2.5px;
left: 50%;
top: 5px;
bottom: 5px;
z-index: 9;
}
.activity {
-webkit-transform: rotateX(90deg);
}
#info1{
visibility: hidden;
background-color: white;
}
var plus_clicked = document.querySelectorAll('.boxed-plus');
var info_1 = document.getElementById('info1');
var clicked = false;
plus_clicked.forEach(function(e){
e.addEventListener('click',function(){
if(clicked === false){
var previous_html = e.parentNode.parentNode.parentNode.parentNode.innerHTML;
clicked === true;
e.classList.add('activity');
this.parentNode.classList.add('active');
setTimeout(function(){
console.log(e.parentNode.innerHTML);
//e.parentNode.innerHTML = info_1.innerHTML;
e.parentNode.parentNode.parentNode.parentNode.innerHTML = info_1.innerHTML;
}, 300);
console.log(this.parentNode.parentNode.parentNode.parentNode);
}else{
e.innerHTML = previous_html;
}
});
})