モーダルフォームのトリガをボタンからリンクに変更するにはどうすればよいですか？

Question

私は親切にも、モーダルフォームの実装に関する助けが必要です。

以下のコードはW3Schoolsから適応されましたが、リンクするには（完全なコード体では以下のように）ボタンからモーダルトリガを変更する際に問題があります。

私は、ボタンのトリガーを交換しようとしている：

<a href="id01">Change Password</a> 

しかし、それは動作しません。リンクをクリックすると、存在しないURLが要求されます。この問題を解決する方法について私に助言してもらえますか？

完全なコードは以下の通りです：

<div id='changePasswordModalButton'> 
        <!-- Button to open the modal Change Password form --> 
        <button onclick="document.getElementById('id01').style.display = 'block'">Change Password</button> 
       </div> 

       <!-- The Modal --> 
       <div id="id01" class="modal"> 
        <span onclick="document.getElementById('id01').style.display = 'none'" class="close" title="Close Modal">&times;</span> 
        <!-- Modal Content --> 
        <form class="modal-content animate" action="/action_page.php"> 
         <div class="container"> 
          <label><b>Current Password*</b></label> 
          <input type="password" name="currentPassword" placeholder="Enter your current password" value="" required/> 
          <label><b>New Password*</b></label> 
          <input type="password" name="currentPassword" placeholder="Enter new password" value="" required/> 
          <label><b>Confirm New Password*</b></label> 
          <input type="password" name="currentPassword" placeholder="Confirm new password" value="" required/> 
          <button type="submit">Update Password</button> 
          <div class="container" style="background-color:#f1f1f1"> 
           <button type="button" onclick="document.getElementById('id01').style.display = 'none'" class="cancelbtn">Cancel</button> 
          </div> 
          <div id="mandatoryFields"> 
           <h4>* Mandatory Fields</h4> 
          </div> 
         </div> 
        </form> 
       </div> 

       <script> 
        // Get the modal 
        var modal = document.getElementById('id01'); 
        // 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 1

は、このボタンを変更したいです。それを行うには

、手順は次のとおりです。

1. aでbuttonを置き換える（ただし、すべての属性を保つ）
2. はhref属性を追加します。使用しないので、#を使って現在のページを指し示してみましょう。
3. onclick属性の末尾にreturn falseを追加して、リンクのデフォルト動作（クリック時にページを開こうとする）を防止します。

結果は次のとおりです。

<a href="#" 
    onclick="document.getElementById('id01').style.display = 'block'; return false">Change Password 
</a> 

---

注onclick属性を使用して行くための最善の方法ではないこと。より良い方法は、あなたが近いイベントのために行ったように、イベントリスナーを使用することです：

このソリューションを使用して

document.getElementById("myLink").addEventListener("click", function(event){ 
    event.preventDefault(); // instead of "return false" 
    document.getElementById('id01').style.display = 'block'; 
}); 

、onclick属性を削除すると、あなたのリンクにidを追加することを忘れないでください：

<a href="#" id="myLink">Change Password</a> 

詳細については、https://www.w3schools.com/jsref/event_preventdefault.aspおよびhttps://www.w3schools.com/jsref/event_onclick.aspを参照してください。

Answer 2

リンクをクリックに対するデフォルトのアクションは、リンクをたどることです。 https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault

あなたはまた、代わりに、ウィンドウのターゲットにイベントハンドラをアタッチ検討する必要があります。あなたはEvent.preventDefault()

window.onclick = function (event) { 
    if (event.target === modal) { 
    event.preventDefault(); 
    modal.style.display = "none"; 
    } 
}; 

参照を使用して、デフォルトを防ぐために必要になります。

// Get the modal 
var modal = document.getElementById('id01'); 
// When the user clicks anywhere outside of the modal, close it 
modal.onclick = function (event) { 
    event.preventDefault(); 
    modal.style.display = "none"; 
}; 

と近代的な構文は次のようになります。

// Get the modal 
var modal = document.getElementById('id01'); 
// When the user clicks anywhere outside of the modal, close it 
modal.addEventListener('click', function (event) { 
    event.preventDefault(); 
    modal.style.display = "none"; 
}, false); 

参照：リンクで

<button onclick="document.getElementById('id01').style.display = 'block'">Change Password</button> 

：私が正しく理解していればhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener