1

Здравствуйте.

Нашел в Интернете исходники модального окна. В моем модальном окне много текста, он выходит за границы модального окна и просто на получерном фоне отображается.

Мне надо, чтобы там как будто стоит скролл, точнее чтобы текст находился только в модальном окне, и если его больше высоты блока, то он опускался вниз.

CSS

.popup { 
    min-width: 320px;
    max-width: 600px;
    width: 600px;
    margin: auto;
    background-color: #fff;
    border: 3px solid #fff;
    display: block;
    left: 0; right: 0;
    opacity: 0;
    padding: 15px;
    position: fixed;
    font-size: 14px;
    top: 0;
    visibility: hidden;
    z-index: 10;
    -webkit-transition: opacity .5s, top .5s;
    -moz-transition: opacity .5s, top .5s;
    -ms-transition: opacity .5s, top .5s;
    -o-transition: opacity .5s, top .5s;
    transition: opacity .5s, top .5s;
}

HTML

<a href="#x" class="overlay" id="id"></a>
   <div class="popup" style="overflow-y: scroll;">
CONTENT
    <a class="close"title="Закрыть" href="#close"></a>
    </div>
8
  • Понял. В таком случае вашему диву задайте overflow: auto и оберните его еще в один див, меньший по ширине примерно на 10 пикселей, и задайте ему overflow: hidden;
    – andreyqin
    6 сен 2014 в 19:57
  • Ни фига не понял. А если допустим открываю модальное окно и если там есть контент привышающий высоту блока, то он просто расширяет высоту и в блоке я смогу так же вверх и в низ + старница которая позади не перелистывается.
    – cnofss
    6 сен 2014 в 20:05
  • Мы вернулись с вами туда, откуда начали. Выполните действия, которые я написал вам в последних 2-х комментариях.
    – andreyqin
    6 сен 2014 в 21:05
  • Не получается. Напишите в ответе, как сделать полностью. Я сделал так: скопировал класс popup и переименовал его на popup2, и в popup2 я поставил overflow: hidden; Потом в html я сделал так: <div class="popup popup2"> ... </div> Но не работает.
    – cnofss
    6 сен 2014 в 21:34
  • Обратите внимание на комментарии в CSS - jsfiddle.net/4a5ncLkr
    – andreyqin
    6 сен 2014 в 21:39

1 ответ 1

2

.text{
	width:1000px;
	height:auto;
	margin:0 auto;
	box-shadow:0 0 5px rgba(100,110,120,.5);
	padding:15px 20px;
	cursor:pointer;
}
#popap{
	display:none;
	width:600px;
	height:auto;
	position:absolute;
	top:50%;
	left:50%;
	margin-top:-250px;
	margin-left:-300px;
	background:rgba(0,0,0,.8);
	box-shadow:0 0 5px rgb(255,255,255);
	z-index:999;
}

#hover{
	display:none;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,.7);
	z-index:998;
}
#hover1{
	display:none;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	background:rgba(0,0,0,.9);
	z-index:997;	
}
<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta charset="UTF-8">
	<title></title>
	<link rel="stylesheet" href="style.css" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<script type="text/javascript"> 
        $(document).ready(function() {
		   $("#button").click(function() {
			   $("#popap").show(500);
			   $("#hover").show();
		});
		$("#hover").click(function(){
			   $("#popap").hide(500);
			   $("#hover").hide();		        
		});
	});
	</script>	
</head>
<body>
<div class="wrapper_1">
	<div id="popap">
	   <iframe width="600" height="400" autoplay="none" src="https://www.youtube.com/embed/KZ1TduvBDy0" frameborder="0" allowfullscreen></iframe>
	</div>
	<div id="hover"></div>
	<div class="text"> 
	  <p> 
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut mollis, felis eu lobortis efficitur, libero risus euismod elit, et commodo eros erat non diam. Suspendisse condimentum felis eu massa sagittis, eu pellentesque ipsum fermentum. Ut eleifend nibh a quam dapibus, at hendrerit elit tincidunt. Ut imperdiet sem vel arcu vehicula iaculis. Mauris fringilla nisl gravida quam bibendum cursus sit amet eget neque. Nunc lacinia dictum lectus. In vulputate turpis in ligula aliquet mollis.

Integer enim libero, rhoncus feugiat lorem sollicitudin, eleifend consectetur felis. Pellentesque molestie nibh at vestibulum dictum. Proin auctor iaculis ligula, id faucibus nisl. Etiam dolor elit, imperdiet tempus tempus ac, pellentesque vitae eros. Nullam varius consectetur volutpat. Aliquam quis sollicitudin ipsum, nec imperdiet lectus. Nulla placerat, nunc ut pulvinar accumsan, arcu quam pulvinar erat, quis volutpat orci odio in justo. Sed mollis est eu laoreet commodo. Duis justo quam, iaculis eu erat et, accumsan venenatis tellus. Curabitur luctus interdum enim ac pellentesque.

Nullam pretium interdum mollis. Cras vel scelerisque libero, eu fringilla neque. Sed porttitor purus quis magna maximus, eu imperdiet purus rhoncus. Pellentesque tempus vel dolor id gravida. Aliquam a commodo lectus. Phasellus in maximus ipsum, eget gravida ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Morbi pulvinar arcu vitae odio maximus, nec efficitur arcu ultrices. Nam mattis at dolor sed ultrices.

Etiam lobortis, velit vel cursus laoreet, ex nisl consequat neque, vel aliquet tellus dolor in eros. Suspendisse quis rhoncus metus. Vivamus non sapien risus. Ut et justo eget dui vulputate lacinia. Integer nulla leo, placerat ac consequat et, dictum commodo diam. Nunc quis diam tincidunt, pulvinar nunc et, gravida erat. Aenean vel neque quis nunc scelerisque maximus. Vestibulum eget porta tortor, non rutrum neque.
	  </p>
	  <button id="button"> Посмотреть</button>
	</div>
</div>
</body>
</html>

вот в примере есть видио с youtube посмотрите его , и научитесь их делать , но модальное окно там плохо работает из за размера экрана , скопируйте код себе и у вас будет все работать

3

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.