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

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

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

---

非常基本，但应该给你一个好的方向。 基本上，创建一个隐藏的div，然后用文本填充其中的跨度并显示div

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

然后使用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包围该DIV。
把信息放在这里

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

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

---

使用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)
}

JS用于清除文本输入字段焦点上的消息。对于要将事件附加到哪些字段，您始终可以更具选择性

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

---

“转换”的意思是在屏幕上显示错误消息吗div@Balanivash-是的，现在js验证正在使用标准js警报。我需要在页面上的一个div中动态显示错误消息。这是如何与上面的代码一起工作的。不确定如何在动态加载的错误消息中合并这两者。只需替换此行警报（bnadd_msg_002）；使用customAlert（bnadd_msg_002）。。。。有更好的方法可以做到这一点，但这是对您已经使用的内容的简单替换。如果您不想重写现有内容，您可以另外指定window.alert=customAlert；它将无缝覆盖您的所有警报语句。效果很好-我对jquery位进行了一些更改，以使其执行其他一些操作-我现在唯一的问题是清除输入字段焦点上的错误消息。我更新了一些代码。感谢您标记它的答案，您可能会考虑任何对您有用的答案。有趣的是，使用jQuery方法的动态错误消息需要在页面上吗？或者我可以调用外部文件吗？（或数组）？Jquery是一个javascript库。它是一个单独的.js文件，您可以从jquery站点免费获得。你可以在你想使用它的每一页上引用它。但基本上在幕后，jquery将为您和所有css创建DIV。它有很多功能，特别是在dom和事件方面。plus在跨浏览器中工作得非常好。Bobby Borszich在下面介绍的是相同的简单想法，避免学习jquery。我还不能给他一个+1。jquery我理解，这是这里的put消息位，我必须从错误消息列表中动态加载

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

#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;
}

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