У меня есть этот bootstrap модальный, и у меня есть две проблемы с ним. Один младший, а второй главный.
1) (несовершеннолетний) Моя задача - показать модал на ВТОРОЙ странице (любая ВТОРАЯ СТРАНИЦА), которую посещает этот человек, но как бы я это ни скрывал, он все равно отображается на первой странице.
2) (Major!) Работает некорректно! Этот фон модального шоу не имеет значения, находится он на странице или нет. Эту ошибку я пытался обойти, используя «display: none» в html на фоне. Это работает в chrome, но не где-нибудь еще.
Как я могу исправить эти проблемы?
Мой проект старый, он использует bootstrap3 и jquery
` <div class="modal fade signup-popup-modal" id="signUpPopUp" role="dialog" display="none">
<div class="modal-dialog" role="document" id="singUpPopUpDialog">
<div class="modal-content">
<div class="modal__close" id="modalClose">
<i class="fas fa-times"></i>
</div>
<div class="modal-body active" id="modalBodyStage-1">
<div class="body__discount-block">
<div class="discount-block__discount">
<p>
Subscribe to our emails &
</p>
<span>
<p>Get 15% off</p>
</span>
<p>
Your first order
</p>
</div>
<div class="discount-block__email">
<input id="emailSignup" type="email" name="signUp" placeholder="Input your email">
<button id="emailSignupSubmitButton" for="signUp">Sign Up</button>
</div>
<div class="discount-block__text">
<p>
Plus you'll always be the first to know about exclusive offers and the latest trends.
</p>
</div>
</div>
<div class="body__privacy">
<a href="#" id="modalPrivacyLink">Privacy Policy</a>
</div>
</div>
<div class="modal-body" id="modalBodyStage-2">
<form class="body__form">
<div class="form__text-block">
<h3>You're on the list.</h3>
<p>Thank you for joining us. Tell us more about yourself.
Use code: <span>welcome15</span> for 15% off your next purchase.</p>
</div>
<div class="form__credentials">
<input id="popupFirstName" type="text" name="firstName">
<input id="popupLastName" type="lastName">
<button class="credentials__button--save" id="firstLastNameSignupSubmitButton" type="button">Save</button>
</div>
</form>
<div class="body__privacy"><a href="#">Privacy Policy</a></div>
</div>
<div class="modal-body" id="modalBodyStage-3">
<h3>Thank you for successfully logging to our website!</h3>
<p>Get up to <span>15% off</span> your first order!</p>
</div>
</div>
</div>
</div>`
МЕНЬШЕ
.signup-popup-modal {
height: 100vh;
width: 100vw;
z-index: 2500;
background-color: rgba(0, 0, 0, 0.5);
padding: 0 !important;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
.modal-dialog {
width: 690px;
height: 325px;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
z-index: 2400;
.modal-content {
background-image: url("../resources/images/Email_Pop_Up_image.jpg");
background-size: 100%;
background-repeat: no-repeat;
width: 100%;
height: 100%;
border-radius: 5px;
position: relative;
@media screen and (max-width: 767px) {
background-image: none;
background-color: #dcdcdc;
width: 90%;
margin: 0 auto;
}
.modal__close {
position: absolute;
top: 0;
right: 0;
width: 3rem;
height: 3rem;
border: 2px solid @white;
border-radius: 50px;
-webkit-transform: translate(50%, -50%);
transform: translate(50%, -50%);
background-color: @black;
display: -webkit-box;
display: flex;
-webkit-box-align: center;
align-items: center;
-webkit-box-pack: center;
justify-content: center;
svg {
font-size: 2rem;
color: @white;
}
&:hover {
cursor: pointer;
svg {
color: @secondaryBtnColor;
}
}
}
.modal-body,
.modal-body#modalBodyStage-1 {
width: 70%;
height: 100%;
display: none;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: justify;
justify-content: space-between;
-webkit-box-align: start;
align-items: flex-start;
opacity: 1;
@media screen and (max-width: 767px) {
width: 100%;
}
.body__discount-block {
height: 80%;
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-align: start;
align-items: flex-start;
-webkit-box-pack: justify;
justify-content: space-between;
@media screen and (max-width: 767px) {
height: 82%;
width: 90%;
margin: 0 auto;
padding-left: 0 !important;
margin-bottom: 1rem;
-webkit-box-align: center;
align-items: center;
}
@media screen and (max-width: 325px) {
height: 82%;
width: 98%;
margin: 0 auto;
padding-left: 0 !important;
margin-bottom: 1rem;
-webkit-box-align: center;
align-items: center;
}
.discount-block__discount {
width: 75%;
text-transform: uppercase;
text-align: center;
font-weight: 500;
et c ...
define([
'modules/jquery'
], function ($) {
$("#signUpPopUp").modal('hide');
$.cookie("SIGNED_USER", true, { path: '/'});
if($.cookie("SIGNED_USER") && !$.cookie("EMAIL_SIGNUP_MODAL_DISSMISSED")) {
$("#signUpPopUp").modal('show');
}
$('#signUpPopUp').on('hidden.bs.modal',
function() {
$.cookie("EMAIL_SIGNUP_MODAL_DISSMISSED", true, { path: '/', expires: 3});
});
$('#modalClose').click(function() {
$("#signUpPopUp").modal('hide');
$.cookie("EMAIL_SIGNUP_MODAL_DISSMISSED", true, { path: '/', expires: 3});
});
});