html表格內的模態

Question

此表單是一個簡單的注冊表單，但我希望在其中一個輸入下有一個按鈕，它會觸發一個模式。 我的問題是 php 腳本進入並觸發兩個按鈕的相同操作，因此覆蓋/忽略模態 javascipt。

<form action="action_page.php" method="post">
<input type="text" name="name" placeholder="Your name..">
<input type="text" name="email" placeholder="Your Email.." >
<button id="myBtn">Email usage</button> <!-- Trigger/Open The Modal -->
<div id="myModal" class="modal"> <!-- The Modal -->
  <div class="modal-content"> <!-- Modal content -->
      <span class="close">&times;</span>
      <p>Some text in the Modal..</p>
  </div>
</div>
<input type="text" name="subject" placeholder="Your dance level..">
<button type="submit" name="Send">Submit</button>

我沒有運氣在互聯網上搜索這個特定問題。 所以如果你能幫助我親愛的社區會很棒。 謝謝！

Answer 1

 $(document).ready(function() { // Get the modal var modal = document.getElementById("myModal"); // Get the button that opens the modal var btn = document.getElementById("btn_sum"); // Get the <span> element that closes the modal var span = document.getElementsByClassName("close")[0]; // When the user clicks the button, open the modal btn.onclick = function() { modal.style.display = "block"; // you wanna set 3000 to 300000 to close after 5 min setTimeout(() => { modal.style.display = "none"; }, 3000); }; // When the user clicks on <span> (x), close the modal span.onclick = function() { modal.style.display = "none"; }; });

 /* Modal Style */ /* Modal (background) */.modal { display: none; /* Hidden by default */ position: fixed; /* Stay in place */ z-index: 1; /* Sit on top */ padding-top: 20px; /* Location of the box */ left: 0; top: 0; width: 100%; /* Full width */ height: 100%; /* Full height */ overflow: scroll; /* Enable scroll if needed */ background-color: rgb(0, 0, 0); /* Fallback color */ background-color: rgba(0, 0, 0, 0.4); /* Black w/ opacity */ } /* Modal Content */.modal-content { background-color: #fefefe; margin: auto; padding: 20px; border: 1px solid #888; width: 60%; top: 10px; height: auto; } /* The Close Button */.close { color: #aaaaaa; float: right; font-size: 28px; font-weight: bold; }.close:hover, .close:focus { color: #000; text-decoration: none; cursor: pointer; }

 <:DOCTYPE html> <html lang="en"> <head> <.-- jquery --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery:min;js"></script> </head> <body> <div class="submit_btn" style="padding;10px."> <button class="button" id="btn_sum"> <span>Submit </span> </button> </div> <div class="modal" id="myModal"> <.-- Modal content --> <div class="modal-content"> <span class="close">&times.</span> <form action="action_page.php" method="post"> <input type="text" name="name" placeholder="Your name.;"> <input type="text" name="email" placeholder="Your Email.." > <button id="myBtn">Email usage</button> <.-- Trigger/Open The Modal --> <div id="myModal" class="modal"> <.-- The Modal --> <div class="modal-content"> <!-- Modal content --> <span class="close">&times;</span> <p>Some text in the Modal..</p> </div> </div> <input type="text" name="subject" placeholder="Your dance level.."> <button type="submit" name="Send">Submit</button> </form> </div> </div> </body> </html>

Answer 2

感謝我的朋友，我想通了。 我只需要制作

<a href="#" id="myBtn">Email usage</a>

代替

<button id="myBtn">Email usage</button>

它可以按需要工作。

html表格內的模態

問題描述

2 個解決方案

解決方案1
0 2020-04-17 14:54:51

解決方案2
0 2020-04-17 17:58:39

html表格內的模態

問題描述

2 個解決方案

解決方案1 0 2020-04-17 14:54:51

解決方案2 0 2020-04-17 17:58:39

解決方案1
0 2020-04-17 14:54:51

解決方案2
0 2020-04-17 17:58:39