JS - 1つの引数と二つの変数

Question

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> 

モーダル：

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

問題は、私は2つのモーダル、ログインとレジスタがあり、私はそれが必要なたびに私の機能を実行したい。 私はJs関数を作成しましたが、次のように2回実行しようとしました。 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>