一款网页提示框小插件：jquery.messager.js

这个基本已经能满足一般情况下的弹窗消息提示需求,特点就是很小巧。

使用方法：

1、引入jquery.js库文件。

2、引入jquery.messager.js。

3、调用方法。

例一：

<script type="text/javascript" src="./jquery.js"></script>
<script type="text/javascript" src="./jquery.messager.js"></script>
<script>
  $(function(){
   // anim：有三种动画显示方式slow、fast、normal（slow）
    $.messager.anim('slow');
    // lays：定义消息提示框宽高（宽，高）
   $.messager.lays(250, 80);
    // show：（标题，内容，动画时间）
   $.messager.show(0, '<a href="#" style="font-size:18px;">立即查看</a>',0);
  });
</script>

当然默认情况下都是在右下角显示提示框，默认是写死位置的。

要想改位置就得去改js文件（position定位位置变化），当然也可以参考：jquery-easyui去调整位置。

我们看看jquery-easyui当中消息提示框那一块他的定位置设置：就看定位的地方style

<script>
        // 顶左
  function topLeft(){
    $.messager.show({
     title:'My Title',
      msg:'The message content',
      showType:'show',
      style:{
       right:'',
       left:0,
       top:document.body.scrollTop+document.documentElement.scrollTop,
       bottom:''
     }
   });
 }
 // 顶中
  function topCenter(){
    $.messager.show({
     title:'My Title',
      msg:'The message content',
      showType:'slide',
     style:{
       right:'',
       top:document.body.scrollTop+document.documentElement.scrollTop,
       bottom:''
     }
   });
 }
 // 顶右
  function topRight(){
   $.messager.show({
     title:'My Title',
      msg:'The message content',
      showType:'show',
      style:{
       left:'',
        right:0,
        top:document.body.scrollTop+document.documentElement.scrollTop,
       bottom:''
     }
   });
 }
 // 中左
  function centerLeft(){
   $.messager.show({
     title:'My Title',
      msg:'The message content',
      showType:'fade',
      style:{
       left:0,
       right:'',
       bottom:''
     }
   });
 }
 // 中中
  function center(){
   $.messager.show({
     title:'My Title',
      msg:'The message content',
      showType:'fade',
      style:{
       right:'',
       bottom:''
     }
   });
 }
 // 中右
  function centerRight(){
    $.messager.show({
     title:'My Title',
      msg:'The message content',
      showType:'fade',
      style:{
       left:'',
        right:0,
        bottom:''
     }
   });
 }
 // 底左
  function bottomLeft(){
   $.messager.show({
     title:'My Title',
      msg:'The message content',
      showType:'show',
      style:{
       left:0,
       right:'',
       top:'',
       bottom:-document.body.scrollTop-document.documentElement.scrollTop
      }
   });
 }
 // 底中
  function bottomCenter(){
   $.messager.show({
     title:'My Title',
      msg:'The message content',
      showType:'slide',
     style:{
       right:'',
       top:'',
       bottom:-document.body.scrollTop-document.documentElement.scrollTop
      }
   });
 }
 // 底右
  function bottomRight(){
    $.messager.show({
     title:'My Title',
      msg:'The message content',
      showType:'show'
   });
 }
</script>

如果要更加多样化的可以查看jquery-easyui插件（有很多功能的，不光是消息提示框哦）。

还有网页布局，手机网页布局等等。各种菜单导航样式。

需要的可以了解一下：jquery-easyui，点击下载jquery-easyui

转载请注明来源地址：小川编程 » https://www.youhutong.com/index.php/article/index/157.html

　　1、本站发布的内容仅限用于学习和研究目的.请勿用于商业或非法用途，下载后请24小时内删除。
　　2、本站所有内容均不能保证其完整性，不能接受请勿购买或下载，如需完整程序，请去其官方购买正版使用
　　3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。
　　4、如侵犯到任何版权问题，请立即告知本站（立即在线告知），本站将及时删除并致以最深的歉意