Question

我需要将我的错误消息转换为定位div（最初隐藏）而不是标准的js警报。我意识到我需要将警报消息推送到DOM，但我是javascript的新手。任何帮助将不胜感激。

此外，我需要在没有确认的情况下执行此操作（因此在字段焦点上删除错误消息）

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

使用jQuery的简单方法

function customAlert(msg){
   var div = $("#AlertMessage");
   if (div.length == 0) {
     div = $("<div id='AlertMessage' onclick='$(this).hide();'></div>");
     $("body").prepend(div);
   } 
   div.html(msg)
}

CSS

#WriteProperties {
    background-color: #FFF;
    border: 1px solid #000;
    height: 300px;  
    position: fixed;
    right: 10px; /* position as desired */
    top: 90px; /* position as desired */
    width: 300px;
    z-index: 1000;
}

JS用于清除文本输入字段焦点上的消息。您可以随时更加选择性地将事件附加到哪些字段。

$("input[type='text']").live("focus", function(){
  $("#AlertMessage").hide();
})

Answer 2

非常基本，但sshould给你一个很好的方向去。基本上你创建一个隐藏的div，然后你将用你的文本填充内部并显示div。

<Div id="myalertbox" style='display:none'>
<span>put message here</span>
</div>

我总是使用jquery来改变DOM。使事情变得更简单。

jquery("#myalertbox span").text(bnadd_msg_002);
jquery("#myalertbox").show();

然后使用CSS来定位DIV。可能必须将DIV设置为绝对位置，然后使用顶部和左侧将其放置在屏幕中间。

You may need to surround the DIV with another DIV.
<div id="grayout">
<Div id="myalertbox" style='display:none'>
<span>put message here</span>
</div>
</div>

显示灰色显示div全屏，但设置其透明度。基本上会阻止人们在您的错误消息显示时点击屏幕。

或者只是获取jquery，它有一个内置的错误消息框。

http://api.jquery.com/jQuery.error/

将JS警报更改为DOM错误消息div

2 个答案: