Question

对于这个我来说，我的联盟有点偏离。我有一个单独验证每个字段的表单，并使用特定的消息执行标准警报。现在我需要将标准警报更改为html中隐藏div中的警报消息，并显示警告消息。（客户端）

不确定从哪里开始，任何指导都会受到赞赏。

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;

Answer 1

您只需覆盖默认的window.alert方法。

window.alert = function( text ) {
    createAWonderfulDialog( text );
};

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

所以继续，做吧！

Answer 2

创建一个更改div内容的函数，然后将其绝对定位在屏幕中间。在您使用警报的地方调用该函数。这个“警报框”还需要某种关闭按钮。加载脚本时，您应该添加一个事件，将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'）。dialog（）。与往常一样，库的缺点是它们会比您编写的代码慢一些，因为库需要支持比您需要的功能更多的功能。

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

2 个答案: