JS - функции называют дважды один аргумент и две переменные

Question

The JS:

function modalf(id){ 
var modal = document.getElementById(id); 

window.onclick = function(event) { 
    if (event.target == modal) { 
     modal.style.display = "none"; 
    } 
} 
window.document.onkeydown = function (esc){ 
if (!esc) esc = event; 
if (esc.keyCode == 27) 
{ 
modal.style.display = "none"; 
} 
} 
} 

Вызов:

modalf('register'); 
modalf('login'); 

Небольшая часть HTML: Кнопка открыта модальная:

<button onclick="document.getElementById('login').style.display='block'">Login</button> 

modal:

<div id="login" class="modal"> 
<span>modal text</span> 
</div> 

Проблема, что у меня есть 2 модала, войдите и зарегистрируйтесь, и я хочу запускать свою функцию каждый раз, когда мне это нужно. Я создал функцию Js, но когда я попытался запустить ее дважды: modalf ('register'); modalf ('login');

только первый работающий, я пытался проверить, работает ли он отдельно ת, и это отлично работает.

У кого-то есть лучшее решение для этого? может быть, что-то хорошее, что я могу использовать функцию для более чем 2 модалов ... может быть, 10 для будущего.

С уважением, Orr.

Answer 1

Проверьте это. Есть некоторые небольшие различия между onclick и addEventListener. Соответствует ли это вашим требованиям?

modalf('register'); 
 
modalf('login'); 
 

 
function modalf(id){ 
 
var modal = document.getElementById(id); 
 

 
var a=function(event) { 
 
    if (event.target == modal) { 
 
     modal.style.display = "none"; 
 
    } 
 
} 
 
window.addEventListener('click',a); 
 
var b= function (esc){ 
 
if (!esc) esc = event; 
 
if (esc.keyCode == 27) 
 
{ 
 
modal.style.display = "none"; 
 
} 
 
} 
 
window.addEventListener("keyup",b); 
 
}

/* Full-width input fields */ 
 
input[type=text], input[type=password] { 
 
    width: 100%; 
 
    padding: 12px 20px; 
 
    margin: 8px 0; 
 
    display: inline-block; 
 
    border: 1px solid #ccc; 
 
    box-sizing: border-box; 
 
} 
 

 
/* Set a style for all buttons */ 
 
button { 
 
    background-color: #4CAF50; 
 
    color: white; 
 
    padding: 14px 20px; 
 
    margin: 8px 0; 
 
    border: none; 
 
    cursor: pointer; 
 
    width: 100%; 
 
} 
 

 
/* Extra styles for the cancel button */ 
 
.cancelbtn { 
 
    padding: 14px 20px; 
 
    background-color: #f44336; 
 
} 
 

 
/* Float cancel and signup buttons and add an equal width */ 
 
.cancelbtn,.signupbtn { 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
/* Add padding to container elements */ 
 
.container { 
 
    padding: 16px; 
 
} 
 

 
/* The Modal (background) */ 
 
.modal { 
 
    display: none; /* Hidden by default */ 
 
    position: fixed; /* Stay in place */ 
 
    z-index: 1; /* Sit on top */ 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; /* Full width */ 
 
    height: 100%; /* Full height */ 
 
    overflow: auto; /* Enable scroll if needed */ 
 
    background-color: rgb(0,0,0); /* Fallback color */ 
 
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
 
    padding-top: 60px; 
 
} 
 

 
/* Modal Content/Box */ 
 
.modal-content { 
 
    background-color: #fefefe; 
 
    margin: 5% auto 15% auto; /* 5% from the top, 15% from the bottom and centered */ 
 
    border: 1px solid #888; 
 
    width: 80%; /* Could be more or less, depending on screen size */ 
 
} 
 

 
/* The Close Button (x) */ 
 
.close { 
 
    position: absolute; 
 
    right: 35px; 
 
    top: 15px; 
 
    color: #000; 
 
    font-size: 40px; 
 
    font-weight: bold; 
 
} 
 

 
.close:hover, 
 
.close:focus { 
 
    color: red; 
 
    cursor: pointer; 
 
} 
 

 
/* Clear floats */ 
 
.clearfix::after { 
 
    content: ""; 
 
    clear: both; 
 
    display: table; 
 
} 
 

 
/* Change styles for cancel button and signup button on extra small screens */ 
 
@media screen and (max-width: 300px) { 
 
    .cancelbtn, .signupbtn { 
 
     width: 100%; 
 
    } 
 
    span.psw { 
 
     display: block; 
 
     float: none; 
 
    } 
 
} 
 
/* The "Forgot password" text */ 
 
span.psw { 
 
    float: right; 
 
    padding-top: 16px; 
 
}

<button onclick="document.getElementById('register').style.display='block'">Sign Up</button> 
 

 
<!-- The Modal (contains the Sign Up form) --> 
 
<div id="register" class="modal"> 
 
    <span onclick="document.getElementById('register').style.display='none'" class="close" title="Close Modal">&times;</span> 
 
    <form class="modal-content animate" action="action_page.php"> 
 
    <div class="container"> 
 
     <label><b>Email</b></label> 
 
     <input type="text" placeholder="Enter Email" name="email" required> 
 

 
     <label><b>Password</b></label> 
 
     <input type="password" placeholder="Enter Password" name="psw" required> 
 

 
     <label><b>Repeat Password</b></label> 
 
     <input type="password" placeholder="Repeat Password" name="psw-repeat" required> 
 
     <input type="checkbox" checked="checked"> Remember me 
 
     <p>By creating an account you agree to our <a href="#">Terms & Privacy</a>.</p> 
 

 
     <div class="clearfix"> 
 
     <button type="button" onclick="document.getElementById('register').style.display='none'" class="cancelbtn">Cancel</button> 
 
     <button type="submit" class="signupbtn">Sign Up</button> 
 
     </div> 
 
    </div> 
 
    </form> 
 
</div> 
 

 

 

 
<!-- Button to open the modal login form --> 
 
<button onclick="document.getElementById('login').style.display='block'">Login</button> 
 

 
<!-- The Modal --> 
 
<div id="login" class="modal"> 
 
    <span onclick="document.getElementById('login').style.display='none'" 
 
class="close" title="Close Modal">&times;</span> 
 

 
    <!-- Modal Content --> 
 
    <form class="modal-content animate" action="action_page.php"> 
 
    <div class="imgcontainer"> 
 
     <!--<img src="img_avatar2.png" alt="Avatar" class="avatar">--> 
 
    </div> 
 

 
    <div class="container"> 
 
     <label><b>Username</b></label> 
 
     <input type="text" placeholder="Enter Username" name="uname" required> 
 

 
     <label><b>Password</b></label> 
 
     <input type="password" placeholder="Enter Password" name="psw" required> 
 

 
     <button type="submit">Login</button> 
 
     <input type="checkbox" checked="checked"> Remember me 
 
    </div> 
 

 
     <div class="clearfix container"> 
 
     <button type="button" onclick="document.getElementById('login').style.display='none'" class="cancelbtn">Cancel</button> 
 
     <span class="psw">Forgot <a href="#">password?</a></span> 
 
     </div> 
 

 
    </form> 
 
</div>

Answer 2

Подумайте, это поможет вам. После запуска фрагмента разрешите 2-3 секунды для его компиляции. Тогда только щелчки будет работать

function modalf(elem,id,id2){ 
 
var modal = document.getElementById(id); 
 
var modal2 = document.getElementById(id2); 
 
elem.addEventListener('click',function(){ 
 
    modal.style.display="block"; 
 
    modal2.style.display="none";}); 
 

 
window.document.onkeydown = function (esc){ 
 
if (!esc) esc = event; 
 
if (esc.keyCode == 27) 
 
{ 
 
modal.style.display = "none"; 
 
} 
 
} 
 
}

<button onclick="modalf(this,'login','register');">Login</button> 
 
modal: 
 

 
<div id="login" class="modal"> 
 
<span>LOGIN</span> 
 
</div> 
 
<br /> 
 
<button onclick="modalf(this,'register','login');">Register</button> 
 
modal: 
 

 
<div id="register" class="modal"> 
 
<span>REGISTER</span> 
 
</div>