Question

我正在制作一个网络应用程序，用户可以输入德语名词的文章。我已经编写了代码，用户可以接受名词，数据库中的文章将显示在一个模态框中。但模态框不会停留。此外，第一次单击提交按钮时，即使数据库中存在该单词，也会运行else部分。

这是代码：

<!-- 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”atributes。

<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'）;

点击提交按钮时的模态框

1 个答案: