从javascript浏览器警报更改为html弹出窗口

这次我有点力不从心。 我有一个单独验证每个字段的表单，并使用特定消息执行标准警报。现在，我需要将标准警报更改为html中隐藏div中的警报消息，并使用alert message.client-side

不确定从何处开始，请提供指导

if(el != null) {
                switch(el.name) {
                    case "firstName":              
                        //First Name Field Validation, Return false if field is empty
                        if( f.firstName.value == "" )
                        {
                            alert( bnadd_msg_002 );
                            if ((typeof TeaLeaf != "undefined") && (typeof TeaLeaf.Client != "undefined") && (typeof TeaLeaf.Client.tlAddEvent != "undefined") ) {
                                var nVO = { ErrorMessage : bnadd_msg_002} 
                                var subtype="CustomErrorMsg";
                                TeaLeaf.Event.tlAddCustomEvent(subtype, nVO);
                                    }
                            return false; 
                        }
                        break;

---

您可以简单地覆盖默认的window.alert方法

即使我通常不建议覆盖/更改任何构建方法，但这是一个例外。旧式浏览器仍然使用一个完全过时的模式对话框锁定整个浏览器

---

所以，继续，做吧

＞P>制作一个改变DIV内容的函数，然后绝对地将它定位在屏幕的中间。在使用alert的地方调用该函数。此警报框还需要某种关闭按钮。加载脚本时，应向“关闭”按钮添加一个隐藏div的事件

jQuery/javascript中的一些伪/实代码：

function betterAlert(msg){
  var jAlert = $('#myAlertDiv'), jWindow = $(window);
  var nHeight = jWindow.height();
  var nWidth = jWindow.width();
  var nAlertHeight = jAlert.height();
  var nAlertWidth = jAlert.width();
  jAlert.css({top:((nWidth-nAlertWidth)/2)+'px',left:((nHeight -nAlertHeight )/2)+'px'});
  jAlert.html(msg);
  jAlert.show();
}
function closeAlert(){
  $('#myAlertDiv').hide();
}
$('body, a.close').click(closeAlert);

当然，还可以使用css根据您的心意设置div的样式

---

如果您喜欢库，另一个选项是使用jQueryUI对话框。我确信几乎所有的图书馆都有类似的功能。您只需使用警报消息创建一个div并调用$'myAlertDiv'。对话框。与往常一样，库的缺点是它们会比您可以编写的代码慢一点，因为库需要支持比您需要多得多的功能。

无关闭按钮。设计规范要求错误显示在焦点上消失。如果没有关闭按钮，我将如何完成此操作？抱歉，没有注意到注释。如果您在身体的焦点事件中设置closeAlert功能，而不是在焦点上进行设置，可能会更好。我仍然会有一个关闭按钮，用户将寻找它。如果你给他们一个没有关闭按钮的对话框，他们可能会感到困惑。您可以同时使用“关闭”按钮和“焦点关闭”。您不能通过插入元素来替换浏览器警报框，因为警报被阻止。一个丑陋的替代方案正在使用，但从性能方面来说，这是一个更糟糕的方法。

function betterAlert(msg){
  var jAlert = $('#myAlertDiv'), jWindow = $(window);
  var nHeight = jWindow.height();
  var nWidth = jWindow.width();
  var nAlertHeight = jAlert.height();
  var nAlertWidth = jAlert.width();
  jAlert.css({top:((nWidth-nAlertWidth)/2)+'px',left:((nHeight -nAlertHeight )/2)+'px'});
  jAlert.html(msg);
  jAlert.show();
}
function closeAlert(){
  $('#myAlertDiv').hide();
}
$('body, a.close').click(closeAlert);