私のモーダルポップアップを表示するにはどうすればいいですか？

Question

<asp:Button ID="btnupdate" runat="server" Text="UPDATE" ValidationGroup="check" /> 

     <div id="msgdiv" class="modal"> 
      <!-- Modal content --> 
      <div class="modal-content"> 
       <span class="close">×</span> 
       <p> 
        update ok confirm pls login again!!!!!!</p> 
      </div> 
     </div> 

    <script> 


     var modal = document.getElementById('msgdiv'); 


     var btn = document.getElementById("btnupdate"); 


     var span = document.getElementsByClassName("close")[0]; 

     btn.onclick = function() { 
      modal.style.display = "block"; 
     } 

     span.onclick = function() { 
      modal.style.display = "none"; 
     } 

    </script> 

このコードは、モーダルポップアップメッセージ用です。 ボタンをクリックすると、モーダルポップアップが表示され、「x」ボタンをクリックすると閉じます。

問題は、モーダルポップアップを示す更新ボタンをクリックするとすぐに消えてしまうことです。 "それのようにそこにはありますが、そうではありません"

私はバックエンドコードで何かすべきか、あるいはフロントエンドコードで修正することができますか？

Answer 1

ASP削除：ボタンが戻って投稿し、それはちょうどあなたがいることをこんなに早くそれをしないフォームをリロードされるので、それはそれを消えていることを理由に

<input ID="btnupdate" runat="server" type="button" value="UPDATE" ValidationGroup="check" /> 

     <div id="msgdiv" class="modal"> 
      <!-- Modal content --> 
      <div class="modal-content"> 
       <span class="close">×</span> 
       <p> 
        update ok confirm pls login again!!!!!!</p> 
      </div> 
     </div> 

    <script> 


     var modal = document.getElementById('msgdiv'); 


     var btn = document.getElementById("btnupdate"); 


     var span = document.getElementsByClassName("close")[0]; 

     btn.onclick = function() { 
      modal.style.display = "block"; 
     } 

     span.onclick = function() { 
      modal.style.display = "none"; 
     } 

    </script> 

：ボタンをし、それだけで入力タイプ、ラナサーバー作りますそれを見ないでください。

Answer 2

ASP.NETボタンは常にsubmitボタン（入力）です。このサーバー側タグには属性OnClientClickがあり、ここで非常に便利です。

<asp:Button ID="btnupdate" runat="server" OnClientClick="return showModal()" Text="UPDATE" ValidationGroup="check" /> 
<%--Note "return" --%> 
... 
<script> 
function showModal(){ 
    //do what you need to show 
    return false; //prefent form submission 
} 
</script>