layer弹窗弹层插件,jquery模拟alert的弹窗插件

为了调用方便,都还可以,②引用layer.min.js,①引用jquery,先去官网下载最新的js 

演示地址:

先去官网下载最新的js 
①引用jquery
②引用layer.min.js

触发弹层的事件可自由绑定,如: 

分享说明:

$('#id').on('click', function(){ 
  layer.msg('test'); 
}); 

第N次造轮子了,只为最简单的调用,jquery模拟alert和confirm的弹窗插件

下面主要贴出上述例子的调用代码: 

调用方法:

【信息框】: 

$.alert('your message');

$.alert('your message',function(){
 $.alert('click ok button')
});

$.confirm('your message');

$.confirm('your message',function(result){
 if(result){
  $.alert('click ok button')
 }else{
  $.alert('click cancel button')
 }
})
layer.alert('白菜级别前端攻城师贤心', 8); //风格一 
layer.msg('前端攻城师贤心'); //风格二 
//当然,远远不止这两种风格。 

为了调用方便,直接将css样式写在了js中,兼容性方面只测试了IE8和chrome以及safari,都还可以。
IE8没问题想必其他现代浏览器应该也是OK的。

【询问框】: 

(function ($) {
  $.extend({
    _isalert:0,
    alert:function(){
      if(arguments.length){
        $._isalert=1;
        $.confirm.apply($,arguments);
      }
    },
    confirm:function(){
      var args=arguments;
      if(args.length&&(typeof args[0] == 'string')&&!$('#alert_overlay').length){
        if(!$('#alert_style').length) $('body').append('<style id="alert_style" type="text/css">#alert_overlay{position:fixed;width:100%;height:100%;top:0;left:0;z-index:999;background:#000;filter:alpha(opacity=5);opacity:.05}#alert_msg{position:fixed;width:400px;margin-left:-201px;left:50%;top:20%;z-index:1000;border:1px solid #aaa;box-shadow:0 2px 15px rgba(0,0,0,.3);background:#fff}#alert_content{padding:20px;font-size:14px;text-align:left}#alert_buttons{padding:10px;border-top:1px solid #aaa;text-align:right;box-shadow:0 1px 0 #fff inset;background:#eee;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none}#alert_buttons .alert_btn{padding:5px 12px;margin:0 2px;border:1px solid #aaa;background:#eee;cursor:pointer;border-radius:2px;font-size:14px;outline:0;-webkit-appearance:none}#alert_buttons .alert_btn:hover{border-color:#bbb;box-shadow:0 1px 2px #aaa;background:#eaeaea}#alert_buttons .alert_btn:active{box-shadow:0 1px 2px #aaa inset;background:#e6e6e6}</style>');
        var dialog=$('<div id="alert_overlay"></div><div id="alert_msg"><div id="alert_content">'+args[0]+'</div><div id="alert_buttons"><button class="alert_btn alert_btn_ok">确定</button><button class="alert_btn alert_btn_cancel">取消</button></div></div>');
        if($._isalert) dialog.find('.alert_btn_cancel').hide();
        dialog.on('contextmenu',function(){
          return !1;
        }).on('click','.alert_btn_ok',function(){
          dialog.remove();
          if(typeof args[1]=='function') args[1].call($,!0);
        }).on('click','.alert_btn_cancel',function(){
          dialog.remove();
          if(typeof args[1]=='function') args[1].call($,!1);
        }).appendTo('body');
      }
      $._isalert=0;
    }
  });
})($);
$.layer({ 
  shade: [0], 
  area: ['auto','auto'], 
  dialog: { 
    msg: '您是如何看待前端开发?', 
    btns: 2,           
    type: 4, 
    btn: ['重要','奇葩'], 
    yes: function(){ 
      layer.msg('重要', 1, 1); 
    }, no: function(){ 
      layer.msg('奇葩', 1, 13); 
    } 
  } 
}); 
//还可用layer.confirm()快捷调用 

以上所述就是本文的全部内容了,希望大家能够喜欢。

【页面层一】 

您可能感兴趣的文章:

  • Jquery实现自定义弹窗示例
  • 小巧强大的jquery
    layer弹窗弹层插件
  • jQuery实现弹窗居中效果类似alert()
  • 运用JQuery的toggle实现网页加载完成自动弹窗
  • jquery弹窗插件colorbox绑定动态生成元素的方法
  • jQuery实现简单弹窗遮罩效果
  • jquery ezUI
    双击行记录弹窗查看明细的实现方法
  • jquery实现弹出窗口效果的实例代码
  • Jquery弹出窗口插件
    LeanModal的使用方法
  • jQuery+jqmodal弹出窗口实现代码分明
  • jQuery
    Mobile弹出窗、弹出层知识汇总
  • jQuery实现的两种简单弹窗效果示例
$.layer({ 
  type: 1, 
  shade: [0], 
  area: ['auto', 'auto'], 
  title: false, 
  border: [0], 
  page: {dom : '.layer_notice'} 
}); 

【页面层二】 

var pageii = $.layer({ 
  type: 1, 
  title: false, 
  area: ['auto', 'auto'], 
  border: [0], //去掉默认边框 
  shade: [0], //去掉遮罩 
  closeBtn: [0, false], //去掉默认关闭按钮 
  shift: 'left', //从左动画弹出 
  page: { 
    html: '<div style="width:420px; height:260px; padding:20px; border:1px solid #ccc; background- color:#eee;"><p>我从左边来,我自定了风 格。</p><button id="pagebtn" class="btns" onclick="">关闭< /button></div>' 
  } 
}); 
//自设关闭 
$('#pagebtn').on('click', function(){ 
  layer.close(pageii); 
}); 

【iframe层一】 

$.layer({ 
  type: 2, 
  shadeClose: true, 
  title: false, 
  closeBtn: [0, false], 
  shade: [0.8, '#000'], 
  border: [0], 
  offset: ['20px',''], 
  area: ['1000px', ($(window).height() - 50) +'px'], 
  iframe: {src: 'http://f2e.sentsin.com/chat'} 
});  

【iframe层二】 

layer.tips('5秒后右下角窗口自动关闭,并生成一个新的iframe', this, { 
  time: 5, 
  maxWidth: 260 
}); 
$.layer({ 
  type: 2, 
  closeBtn: false, 
  shadeClose: true, 
  shade: [0.1, '#fff'], 
  border: [0], 
  time: 5, 
  iframe: { 
    src: 'test/guodu.html' 
  }, 
  title: false, 
  area: ['300px','250px'], 
  shift: 'right-bottom', 
  end: function(){ 
    $.layer({ 
      type : 2, 
      title: '贤心博客 - sentsin.com', 
      shadeClose: true, 
      maxmin: true, 
      fix : false,  
      area: ['1024px', 500],            
      iframe: { 
        src : 'http://sentsin.com/' 
      }  
    }); 
  } 
}); 

【加载层一】 

layer.load(3); 

【加载层二】 

layer.load('加载带文字', 3); 

【tips层一】 

layer.tips('tips的样式并非是固定的,您可自定义外观。', this, { 
  style: ['background-color:#78BA32; color:#fff', '#78BA32'], 
  maxWidth:185, 
  time: 3, 
  closeBtn:[0, true] 
}); 

【tips层二】 

layer.tips('默认没有关闭按钮', this , {guide: 1, time: 2}); 

【输入/文件层】 

//普通文本 
layer.prompt({title: '您的名字?'}, function(name){ 
  alert(name); 
}); 
//密码文本 
layer.prompt({title: '输入任何口令,并确认',type: 1}, function(pass){ 
  alert(pass); 
}); 
//文件上传 
layer.prompt({title: '随便上传个东东,并确认',type: 2}, function(file){ 
  alert(file); 
}); 
//多行文本 
layer.prompt({title: '随便写点啥,并确认',type: 3}, function(val){ 
  alert(val); 
}); 

【tab层】 

layer.tab({ 
  area: ['1000px', '500px'], 
  data: [ 
    {title: 'Say', content:'Hi,Main'}, 
    {title: '无题', content:'支持html传入'}           
  ] 
}); 

【相册层】 

//此处为异步请求模式,具体的json格式,请等待文档更新。或者你直接通过请求看photos.json 
var conf = {}; 
$.getJSON('ajax地址', {}, function(json){ 
  conf.photoJSON = json; //保存json,以便下次直接读取内存数据 
  layer.photos({ 
    html: '这里传入自定义的html,也可以不用传入(这意味着不会输出右侧区域)。相册支持左右方向键、Esc关闭', 
    json: json 
  }); 
}); 

您可能感兴趣的文章:

  • Jquery实现自定义弹窗示例
  • jQuery实现弹窗居中效果类似alert()
  • 运用JQuery的toggle实现网页加载完成自动弹窗
  • jquery模拟alert的弹窗插件
  • jquery弹窗插件colorbox绑定动态生成元素的方法
  • jQuery实现简单弹窗遮罩效果
  • jquery ezUI
    双击行记录弹窗查看明细的实现方法
  • jquery实现弹出窗口效果的实例代码
  • Jquery弹出窗口插件
    LeanModal的使用方法
  • jQuery+jqmodal弹出窗口实现代码分明
  • jQuery
    Mobile弹出窗、弹出层知识汇总
  • jQuery实现的两种简单弹窗效果示例