#javascript #html #jquery #css
#javascript #HTML #jquery #css
Вопрос:
У меня есть некоторые проблемы с моим модальным полем. При переполнении текст выходит за пределы блока. Что я могу с этим сделать? Также я хочу удалить прокрутку главной страницы, когда открыта модальная. Есть ли какой-либо способ, кроме как скрыть переполнение? Вот Jsfiddle, где вы можете увидеть мою проблему.
$("#reviewBtn").click(function () {
$("#reviewModal").show()
});
$(".close").click(function () {
$("#reviewModal").hide()
}); .modal {
display: none;
position: fixed;
z-index: 9999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100vh;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
font-size: 14px;
background-color: blue;
margin: auto;
width: 100%;
height: 100%;
padding-top: 2%;
}
.close {
color: #aaaaaa;
font-size: 28px;
font-weight: bold;
float: right;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reviewModal" class="modal">
<div class="modal-content">
<span class="close">amp;times;</span>
<p>Text </p>
ttt
</div>
</div>
<button class = "reviews-btn" id="reviewBtn">Click</button> Ответ №1:
Самый простой способ, если вы устанавливаете модальное открытие body вашей страницы display: fixed .
$("#reviewBtn").click(function () {
$("#reviewModal").show();
$('body').css({'display': 'fixed'});
});
$(".close").click(function () {
$("#reviewModal").hide();
$('body').css({'display': 'block'});
});
Комментарии:
1. @lortshi я пытаюсь, но это не работает
2. Я понял, что мое решение — это всего лишь одна часть вашего вопроса, чтобы исправить прокрутку под телом, если модал открыт. Полное и приятное решение сделано @Minal Chauhan.
3. @lortshi я тоже кое-что забыл. Я думал, что его прокрутка страницы вызывает переполнение bg-color, но его модальный. В любом случае спасибо.
Ответ №2:
добавьте класс, body когда модальный открыт, и overflow:hidden в этот класс
$("#reviewBtn").click(function () {
$("#reviewModal").show();
$('body').addClass('modal-open');
});
$(".close").click(function () {
$("#reviewModal").hide();
$('body').removeClass('modal-open');
}); body.modal-open {
overflow: hidden;
}
.modal {
display: none;
position: fixed;
z-index: 9999;
padding-top: 50px;
left: 0;
top: 0;
width: 100%;
height: calc(100vh - 50px);
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
overflow-y: auto;
}
.modal-content {
font-size: 14px;
background-color: #abff3b;
margin: auto;
/*width: 100%;
height: 100%;*/
padding: 2%;
}
.close {
color: #aaaaaa;
font-size: 28px;
font-weight: bold;
float: right;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="reviewModal" class="modal">
<div class="modal-content">
<span class="close">amp;times;</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<br/> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br/>
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br/> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <br/>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum </p>
</div>
</div>
<button class = "reviews-btn" id="reviewBtn">Click</button> Комментарии:
1. извините за другой вопрос, но мне нужно, чтобы модальное поле занимало всю высоту и ширину, кроме заполнения сверху. Как я могу сделать это с высотой и шириной содержимого 100%?
2. В приведенном выше фрагменте модальные значения занимают всю высоту и ширину экрана
Ответ №3:
Вероятно, вам просто нужно указать фиксированную высоту тегу p внутри модального
.modal-content > p {
height: 40vh;
overflow-y: scroll;
}
Комментарии:
1. Это хороший способ, но я не должен использовать фиксированную высоту
Ответ №4:
$("#reviewBtn").click(function () {
$("#reviewModal").show();
$("body").addClass("overflow-hidden");
});
$(".close").click(function () {
$("#reviewModal").hide();
$("body").removeClass("overflow-hidden");
});
// css
body.overflow-hidden {
overflow:hidden !important;
}
.modal-content {
height:auto;
}
.modal {
overflow-y: scroll;
}