Javascript 自定义对话框不显示

我正在编写一些javascript和HTML，我想为用户错误处理（不填写字段）创建自定义对话框。由于某些原因，当发生用户错误时，框不会显示。我的Java scrip和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>

$（文档）.ready（函数（）{
$（“#提交按钮”）。单击（函数（）{
ShowCustomDialog（）；
});
});
函数ShowCustomDialog（）
{
var name=document.getElementById（'name'）；
var address=document.getElementById（'email'）；
var reason=document.getElementById（'reason'）；
var message=document.getElementById（'message'）；
如果（name.value=''）{
ShowDialogBox（'Warning'、'Enter your name'、'Ok'、'GoToAssetList'，null）；
返回false；
}
如果（email.value==''）{
ShowDialogBox（'警告'，'输入您的电子邮件'，'确定'，''，GoToAssetList'，空）；
返回false；
}
如果（reason.value=''）{
ShowDialogBox（'Warning'、'Select a reason'、'Ok'、'GoToAssetList'，null）；
返回false；
}
如果（message.value==''）{
ShowDialogBox（'警告'，'输入消息'，'确定'，''，GoToAssetList'，null）；
返回false；
}
}
函数显示对话框（标题、内容、btn1text、btn2text、函数text、参数列表）{
var btn1css；
var-btn2css；
如果（btn1text==''）{
btn1css=“hidecss”；
}否则{
btn1css=“showcss”；
}
如果（btn2text==''）{
btn2css=“hidecss”；
}否则{
btn2css=“showcss”；
}
$（“#lblMessage”）.html（内容）；
$（“#对话框”）。对话框({
可调整大小：false，
标题:标题,，
莫代尔：是的，
宽度：“400px”，
高度：“自动”，
bgiframe:false，
隐藏：{效果：“缩放”，持续时间：400}，
按钮：[
{
文本：btn1text，
“类”：btn1css，
单击：函数（）{
$（“#dialog”）.dialog（'close'）；
}
},
{
文本：btn2text，
“类”：btn2css，
单击：函数（）{
$（“#dialog”）.dialog（'close'）；
}
}
]
});
}
你的名字：
您的电子邮件：
报告理由：
请选择。。。
错误报告
特征
技术支持
其他。。。
您的留言：

---

如果有任何帮助，我将不胜感激

当您在按钮上出现单击事件时，您必须返回false或使用e.preventDefault（）。否则，按钮将提交页面，您将永远看不到对话框

比如说

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

在我的示例中，您应该向ShowCustomDialog函数添加一个return true

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

   return true;
}

---

当按钮上出现单击事件时，必须返回false或使用e.preventDefault（）。否则，按钮将提交页面，您将永远看不到对话框

比如说

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

在我的示例中，您应该向ShowCustomDialog函数添加一个return true

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

   return true;
}

---

为什么不使用模态查看：

或引导模态：

---

为什么不使用模式请参见：

或引导模态：

---

很抱歉出现此警报（'您按了…'）；。。。我刚测试完就忘了把它拿出来。谢谢你的帮助，罗伯特。但是，由于某种原因，当我运行它时，对话框窗口不会显示在网页上，只能通过联机编译器显示。它对我有效：。您是否在

$（“#submit_按钮”）行中添加了e。单击（函数（e）{

？是的，我仍然没有收到任何消息。我想知道这是否是chrome的问题。我运行chrome。JSFIDLE是否也对您不起作用？很抱歉（'您按下了…'））…我在初始测试后忘记取出它了感谢您的帮助，@robert。但是，由于某种原因，当我运行它时，对话框窗口不会显示在网页上，只能通过在线编译器显示。它对我有效：。您是否在

$（“#提交#按钮”）行中添加了e。单击（函数（e）{

？是的，我仍然没有收到消息。我想知道这是否是chrome的问题。我运行chrome。JSFIDLE也不适合你吗？