jQuery 提示框控件

• 下载源代码 - 3.5 KB

引言

我们经常需要在客户端与用户交互，用于不同的验证目的或任何其他指导目的。对于所有这些，我们更喜欢简单、轻量且易于实现的技术。在客户端向用户发出警报必须非常美观，因为现在网络用户已经习惯于他们所面对的一切事物都具有吸引力。我使用 jQuery 开发了一个消息框，它非常易于使用且外观美观。它为开发人员提供了一种向最终用户显示不显眼消息的简单方法。

背景

我将其命名为 braviMessageBox。这个弹出消息框是一个浮动窗口，包含一个内容区域。对话窗口默认情况下通过“x”图标关闭。

如果内容长度超过最大高度，则会自动出现滚动条。

Using the Code

braviMessageBox 非常易于使用：您只需要添加对 Jquery 的引用，并添加 braviMessageBox.js 文件和 braviMessageBox.css 文件。

“如何使用”的快速代码示例如下。

<input type="button" id="btnTest" value="Click Me!" 
onclick="ShowMessage('Testing bravi Message Box..<br />
this is a very pretty jquery message box control!');" />

js 文件中使用的技术只是创建一个 DIV 元素并将其附加到页面 BODY。

function ShowMessage(message) {
 $("<div class='msg' id='dvMsg'><table width='100%'><tr><td width='90%'>" + 
message + "</td><td width='10%' valign='top' style='float:right;text-decoration:none;'>
<a href='javascript:void();' onclick='closethis(myMessage);'>x</a>
</td></tr></table></div>").attr('id', 'myMessage').appendTo('body');
 setTimeout("$('#myMessage').fadeOut('slow');", 2900);
 setTimeout("$('#myMessage').remove();", 4000);
}

虽然此消息框会在一段时间后消失，但您仍然可以关闭它。有 close 方法。

function closethis(id) {
 $('#myMessage').fadeOut('slow');
 setTimeout("$('#myMessage').remove();", 1000);
}

现在只有一个 CSS 类用于将 Div 定位在屏幕中央。

CSS 类是

 .msg
  {
   background-color: #4f7eaa;
   text-align: left;
   position: absolute;
   top: 35%;
   left: 40%;
   margin-left: -70px;
   width: 350px;
   height: auto;
   padding: 10px 10px 8px 10px;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -khtml-border-radius: 10px;
   border-radius: 10px;
  }

未来计划

这是我在论坛上的第一个 帖子 。现在我打算继续并希望将其增强为一个类似的弹出对话框页面。