自定義對話框不顯示

Question

我正在寫一些JavaScript和HTML，我想爲用戶錯誤處理（不填寫字段）做自定義對話框。出於某種原因，當出現用戶錯誤時，這些框不顯示。我的Java紙條和HTML如下：

 <script>$(document).ready(function(){ 
       $('#submit_button').click(function(){ 
        ShowCustomDialog(); 
       }); 
        }); 

     function ShowCustomDialog() 
     { 
      var name = document.getElementById('name'); 
      var address = document.getElementById('email'); 
      var reason = document.getElementById('reason'); 
      var message = document.getElementById('message'); 
      if(name.value == ''){ 
       ShowDialogBox('Warning','Enter your name','Ok','', 'GoToAssetList',null); 
       return false; 
      } 
      if(email.value == ''){ 
       ShowDialogBox('Warning','Enter your email.','Ok','', 'GoToAssetList',null); 
       return false; 
      } 
      if(reason.value == ''){ 
       ShowDialogBox('Warning','Select a reason','Ok','', 'GoToAssetList',null); 
       return false; 
      } 
      if(message.value == ''){ 
       ShowDialogBox('Warning','Enter a message.','Ok','', 'GoToAssetList',null); 
       return false; 
      } 

     } 

     function ShowDialogBox(title, content, btn1text, btn2text, functionText, parameterList) { 
      var btn1css; 
      var btn2css; 

      if (btn1text == '') { 
       btn1css = "hidecss"; 
      } else { 
       btn1css = "showcss"; 
      } 

      if (btn2text == '') { 
       btn2css = "hidecss"; 
      } else { 
       btn2css = "showcss"; 
      } 
      $("#lblMessage").html(content); 

      $("#dialog").dialog({ 
       resizable: false, 
       title: title, 
       modal: true, 
       width: '400px', 
       height: 'auto', 
       bgiframe: false, 
       hide: { effect: 'scale', duration: 400 }, 

       buttons: [ 
           { 
            text: btn1text, 
            "class": btn1css, 
            click: function() { 

             $("#dialog").dialog('close'); 

            } 
           }, 
           { 
            text: btn2text, 
            "class": btn2css, 
            click: function() { 
             $("#dialog").dialog('close'); 
            } 
           } 
          ] 
      }); 
     }</script><form method="post" action="MAILTO:me" enctype="text/plain" onsubmit=" return ShowCustomDialog()"> 

    <div class="row"> 
    <label>Your Name:</label> 
    <input type="text" id="name" name="name" size="20" /> 
    </div> 
    <div class="row"> 
    <label>Your E-mail:</label> 
    <input type="text" id="email" name="email" size="20" /> 
    </div> 
    <div class="row"> 
    <label>Reason for Report:</label> 
    <select id="reason" name="reason" /> 
    <option value="">Please Select...</option> 
    <option value="bug">Bug Report</option> 
    <option value="feature">Feature</option> 
    <option value="tech_support">Technical Support</option> 
    <option value="other">Other...</option> 
    </select> 

    </div> 

    <div class="row"> 
    <label>Your Message:</label> 
    <textarea type="text" id="message" name="message" rows="7" cols="30"></textarea> 
    </div> 
    <input id="submit_button" type="submit" value="Send E-mail" /> 
    <div id="dialog" title="Alert message" style="display: none"> 
    <div class="ui-dialog-content ui-widget-content"> 
     <p> 
     <span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0"></span> 
     <label id="lblMessage"> 
     </label> 
     </p> 
    </div> 
    </div> 
</form> 

我會任何幫助

Answer 1

感激當您在一個按鈕有一個點擊事件，你必須返回false或使用e.preventDefault（）。否則，按鈕會提交頁面，並且您從不會看到對話框。

例如

$(document).ready(function(){ 
      $('#submit_button').click(function(e){ 
      if(!ShowCustomDialog()) { 
       e.preventDefault() 
      } 
      }); 
}); 

用我的例子，你應該添加到您的ShowCustomDialog函數返回真。

function ShowCustomDialog() 
{ 
    ... 
    if(message.value == ''){ 
    ShowDialogBox('Warning','Enter a message.','Ok','', 'GoToAssetList',null); 
    return false; 
    } 

    return true; 
} 

Answer 2

你爲什麼不使用模式看：

http://www.w3schools.com/howto/howto_css_modals.asp

或引導情態動詞：

http://getbootstrap.com/javascript/#modals