Как открыть div блок .conteiner на всю страницу, как на данном сайте, под кодом до вопроса "Развернуть фрагмент" ?
https://jsfiddle.net/p7cc1uys/
$("#button").click(function() {
//alert("Проверка");
});
* {
margin: 0px;
padding: 0px;
}
html,
body {
min-height: 100%;
}
body {
background: #ddd;
}
.conteiner {
background: #F3EFE1;
overflow: auto;
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 40px;
position: relative;
-webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
-moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
}
#button {
float: right;
width: 80px;
cursor: pointer;
text-align: center;
padding: 4px 13px;
border: solid 1px #004F72;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font: 12px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #E5FFFF;
background-color: #3BA4C7;
background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
Ответ
Еще один вариант
$(".button").click(function() {
var parent = $(this).parents()[0]; //получаем родительський элемент
var width = $(parent).width(); //узнаем ширину родительського блока
$(parent).toggleClass("full"); //добавляем/убираем класс где блок во весь екран
if(width=='200'){ //если ширина равна 200
$(parent).children('.button').text('Свернуть'); //если истина то надпись "Свернуть"
}
else {
$(parent).children('.button').text('Развернуть');//если ложь то надпись "Свернуть"
}
});
/* блок во весь екран */
.full {
width: 100% !important;
height: 100% !important;
position: absolute !important;
margin-top: 0px !important;
z-index: 99999 !important;
}
* {
margin: 0px;
padding: 0px;
}
html,
body {
min-height: 100%;
}
body {
background: #ddd;
}
.conteiner {
background: #F3EFE1;
overflow: auto;
width: 200px;
height: 200px;
margin: 0 auto;
margin-top: 40px;
position: relative;
-webkit-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
-moz-box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
box-shadow: inset 0px 0px 9px 2px rgba(0, 0, 0, 0.32);
}
.button {
float: right;
width: 80px;
cursor: pointer;
text-align: center;
padding: 4px 13px;
border: solid 1px #004F72;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
font: 12px Verdana, Geneva, sans-serif;
font-weight: bold;
color: #E5FFFF;
background-color: #3BA4C7;
background-image: linear-gradient(top, #3BA4C7 0%, #1982A5 100%);
-webkit-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
-moz-box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
box-shadow: 0px 0px 2px #bababa, inset 0px 0px 1px #ffffff;
}
Комментариев нет:
Отправить комментарий