There are two modal windows in the project that are invoked when clicking on the login or registration buttons that are in the header. The problem is that the darkening of the modal window should not affect the heder and footer. For the first time, I encounter the code of the modal login window:

<script> export default { name: 'app-login', props: { isOverlay: { type: Boolean, default: true } }, data() { return { } }, methods: { show () { this.$modal.show('app-login'); } } } </script> 
 <style> .fade-enter-active, .fade-leave-active { transition: opacity 0.2s; } .fade-enter, .fade-leave-to { opacity: 0; } .overlay { z-index: 99999; width: 100%; height: 100%; pointer-events: none; background-color: #fff; } .container_login { display: flex; flex-direction: column; justify-content: center; padding: 35px; height: 350px; width: 300px; margin: auto; background-color: #fff; border-radius: 5px; } .container_login.login_title { display: flex; flex-direction: row; } .container_login.login_title.title { font-size: 20px; font-weight: 600; color: rgb(70, 66, 66); } .container_login.form_login { display: flex; flex-direction: column; } .container_login.form_login input { padding: 20px; margin: 17px 0; font-size: 15px; background-color: rgb(239, 239, 239); } .container_login.form_login.entry_btn { height: 50px; font-size: 15px; text-transform: capitalize; border-radius: 5px; box-shadow: none; color: #fff; background-color: rgb(153, 198, 31); } .container_login.href_pass { display: flex; margin: 20px 0; } </style> <!-- begin snippet: js hide: false console: true babel: false --> 
 <template> <transition name="fade"> <modal name="login" width="430" height="auto"> <div class="container_login" :class="{login: true, overlay: isOverlay}"> <div class="login_title"> <p class="title">Добро пожаловать!</p> </div> <div class="form_login"> <input type="email" placeholder="Ваш e-mail"> <input type="password" placeholder="Пароль"> <button class="entry_btn mdl-button mdl-js-button mdl-button--raised">Войти</button> </div> <div class="href_pass"> <a href="#">Забыли пароль?</a> </div> </div> </modal> </transition> </template>

Thanks in advance for the help!

  • Create a minimally reproducible example. Snippet in the input window settings. And yes - tried to assign them z-index more than the overlap? - user207618
  • Of course, z-index tried to set the header and footer more than the modal window, or rather, z-index: 999999, did not work (And can you tell a little more about the snippet? - omasreq
  • In the input / editing window at the top there are settings icons - zhyrny, italics, etc. There is a snippet icon among them ( cdn.sstatic.net/Sites/ru/img/wmd-buttons.png?v=20e89c789eb5 - middle right at the end ). There enter JS, HTML, CSS so that your behavior is reproduced. - user207618
  • something didn’t work out very well, forgive forgiveness, my first experience) - omasreq
  • one
    Then call someone who understands a little in this matter. - user207618

1 answer 1

Experience suggests that the problem lies either in the z-index, which is less in the modal window than in the header, or you have somewhere some kind of tag that is not closed. The same can be. Show html please.

  • Added template code, tags are closed - omasreq
  • at header and footer z-index: 999999 - omasreq
  • He needs the opposite - Qwertiy ♦