單擊提交按鈕上的模式框

Question

我正在制作一個網絡應用程序，提供用戶輸入的德語名詞的文章。 我已經編寫了代碼，其中名詞將被用戶接受，並且數據庫中的文章將顯示在模式框中。 但是模態框不會保留。 再者，我第一次單擊“提交”按鈕時，“其他”部分就會運行，即使該詞已存在於數據庫中。

這是代碼：

 <!-- Parallax Image with noun Text --> <div class="bgimg-2 w3-display-container w3-opacity-min"> <div class="w3-display-middle"> <span class="w3-xxlarge w3-text-white w3-wide">NOUN</span> </div> </div> <!-- Container (noun Section) --> <div class="w3-content w3-container w3-padding-64" id="noun"> <h3 class="w3-center">ENTER THE NOUN: </h3></br></br> <form name="logged_in.jsp" method="post" action=""> <div class="w3-center"> <input type="text" name="noun"></br></br></br> </div> <div class="w3-center"> <button class="w3-button w3-black w3-right w3-section" type="submit" id="article" > GET ARTICLE </button> </div> </form> </div> <!-- The Modal --> <div id="nounModal" class="modal"> <% String s =null; String s1=request.getParameter("noun"); String s2 =null; String s3 =null; int f=0; try{ System.out.println(s1); Statement st = con.createStatement(); ResultSet rs = st.executeQuery("select * from nouns where noun='"+s1+"'"); if(rs.next()){ f=1; s=rs.getString("article"); s2=rs.getString("plural"); s3=rs.getString("meaning"); } }catch(Exception e){System.out.println("e.............."+e);} if(f==1){%> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal">Close</button> <div id="output"> <p>Article: <%=s%></br></p> <p>Noun: <%=s1%></br></p> <p>Plural: <%=s2%></br></p> <p>Meaning: <%=s3%></p> </div> <%} else{%> <div class="modal-content"> <button type="button" class="close" data-dismiss="modal">Close</button> <p>Sorry! no results found. would you like to add a new word? <a>add</a> click here </p> <%}%> </div > </div> <script> $(document).ready(function(){ $("#article").click(function(){ $("#nounModal").modal(''); }); </script> 

Answer 1

您的按鈕應該包含data-toggle =“ modal” data-target =“＃nounModal”屬性。

<button class="w3-button w3-black w3-right w3-section" type="submit" id="article" data-toggle="modal" data-target="#nounModal">GET ARTICLE </button>

或嘗試$（“＃nounModal”）。modal（'show'）;