Answer the question
In order to leave comments, you need to log in
Conflict in code for modal windows, how to fix?
Hello)
There are three buttons on the site page that cause a modal window: In the menu, in the product description and in the footer.
The matter is that between three scripts for different windows there is a conflict and that window which is the last is displayed. Instead of a thousand words, I will insert pieces of code)
Code of the first application:
<button id="Launch-modal__BTN" href="#">Заказать звонок!</button>
<div id="Menu__request" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="Menu__request_heading">
Заказать звонок
</div>
<form class="Menu__request_form" id="form" action="sender.php">
<input type="hidden" name="project_name" value="Сайт “СвятоГор”">
<input type="hidden" name="admin_email" value="sekret)">
<input type="hidden" name="form_subject" value="С заявки на звонок">
<input type="text" name="Имя клиента" placeholder="Ваше имя и фамилия" required>
<input type="tel" name="Телефон" placeholder="Ваш телефон" required>
<input name="sendMail" type="submit" class="Submit__BTN">
</form>
</div>
</div>
<script>// Get the modal
var modal = document.getElementById('Menu__request');
// Get the button that opens the modal
var btn = document.getElementById("Launch-modal__BTN");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}</script>
</div>
</div>
, <div class="dostavka__button">
<button id="Launch-modal__BTN6">Заказать!</button>
<span class="certified">Товар сертифицирован</span>
</div>
<div id="Menu__request6" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="Menu__request_heading">
Заказать ОПАЛУБКУ ПЕРЕКРЫТИЙ
</div>
<form class="Menu__request_form" id="form" action="sender.php">
<input type="hidden" name="project_name" value="Сайт “СвятоГор”">
<input type="hidden" name="admin_email" value="[email protected]">
<input type="hidden" name="form_subject" value="С страницы Рамных лесов">
<input type="text" name="Имя клиента" placeholder="Ваше имя и фамилия" required>
<input type="tel" name="Телефон" placeholder="Ваш телефон" required>
<input type="tel" name="email" placeholder="Ваш email" required>
<textarea placeholder="Сообщение.." name="Сообщение"></textarea>
<input name="sendMail" type="submit" class="Submit__BTN">
</form>
</div>
</div>
<script>// Get the modal
var modal = document.getElementById('Menu__request6');
// Get the button that opens the modal
var btn = document.getElementById("Launch-modal__BTN6");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}</script>
</div>
</div>
</div>
<div class="Footer__phone_number">
+7 8812 308 88 84
</div> <br>
<a href="#footer" id="Launch-modal__BTN2">Заказать звонок!</a>
</div>
<script>// Get the modal
var modal = document.getElementById('Menu__request');
// Get the button that opens the modal
var btn = document.getElementById("Launch-modal__BTN2");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}</script>
Answer the question
In order to leave comments, you need to log in
It is necessary not to produce the same code for each modal. Write your code like this:
1. Broadcast to all elements with class X click event
2. Click event calls the function of opening the desired modal. The required modal can be defined in paragraph 1.
3. On the elements intended to close the modal, you need to hang an event that calls the closing function of the current modal. Which modal to close can be found at the time of the event bubbling for closing
Didn't find what you were looking for?
Ask your questionAsk a Question
731 491 924 answers to any question