jQuery弹出层layer插件的使用

引入插件layer

触发弹出层的按钮/链接

<a href="javascript:showPop();">
    <img src="" />
</a>

弹出层内容

<div style="display: none">
     <div id="attention" style="text-align:left;max-height:5rem;overflow-y:scroll;">
          <p>这是显示在弹出层里的文字</p>
      </div>
 </div>

js内容

    function showPop(){
        layer.open({
            content: $("#attention").prop("outerHTML"),
            style: "text-align: left;"
        });
    };

纯粹新手记录,一个简单的小用法,更多功能请查看layer官方演示与讲解,以后多用多熟悉吧~

时间: 2024-10-07 10:58:22

jQuery弹出层layer插件的使用的相关文章

【jquery】fancybox 是一款优秀的 jquery 弹出层展示插件

今天给大家分享一款优秀的 jquery 弹出层展示插件 fancybox.它除了能够展示图片之外,还可以展示 flash.iframe 内容.html 文本以及 ajax 调用,我们可以通过 css 来自定义外观. fancybox 特点: 可以支持图片.html 文本.flash 动画.iframe 以及 ajax 的支持: 可以自定义播放器的 css 样式: 可以以组的形式进行播放: 如果将鼠标滚动插件(mouse wheel plugin)包含进来的话 fancybox 还能支持鼠标滚轮滚

【转】10 个很有用的 jQuery 弹出层提示插件

模态对话框为网站用户提供了快速显示信息的方法,也可以用来提示错误.警告和确认等信息,这里介绍了 10 个弹出模态对话框插件. How to Create a jQuery Confirm Dialog Replacement Open Source TinyBox2 JavaScript Modal Windows Apprise: Attractive Alert and Dialog Box for jQuery noty Reveal: jQuery Modals Made Easy A

效果非常好的 Jquery弹出层插件 jQuery Sweet alert

介绍款交互性非常不错的jquery弹出层插件,支持消息提示.错误提示.确认框提示等. 交互式体验感非常不错,比如咱们现在体验非常不错的微信支付.支付宝等完成后的效果. 不过本插件至少支持IE9+ Jquery Sweet Alert 使用方式也特别简单.粗暴,符合大众的jquery插件使用方法. 演示地址: http://www.xuetub.com/plugin/demo/111 欢迎大家去学徒帮分享更多jQuery插件,大家共同学习进步,帮助更多的小伙伴!!!

jQuery Dialog弹出层对话框插件

Dialog.js的相关注释已经添加,可以按照注释,进行相关样式的修改,适用于自定义的各个系统! dialog.js 1 /** 2 * jQuery的Dialog插件. 3 * 4 * @param object content 5 * @param object options 选项. 6 * @return 7 */ 8 function Dialog(content, options) 9 { 10 var defaults = { // 默认值. 11 title:'标题', // 标

实用带多种CSS动画特效的jQuery弹出层插件hDialog.js

<!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <link rel=&qu

有关jquery弹出层

http://www.jb51.net/article/35216.htm   源地址 今天用到了 JQuery 弹出层,看了很多东西, 对于其他的用插件的还得下载,想了想 还得下载, 于是就 找了个只用这个的JQuery/javascript 的代码, 自我感觉用起来方便 那么 这个网址就给自己留着吧~ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/T

jquery弹出层

Ug,一个轻量级的js组件.web弹窗(层)解决方案 .网址:http://ug66.cn/ 效果预览: Ug,简洁的代码.灵活的自定义,您只需简单地调用,即可轻松实现各种弹出效果. Ug,她尽可能地以更少的代码展现出更强健的功能,让您的页面拥有更丰富与便捷的UI体验. Ug.格外注重性能的提升.易用和实用性. 鄙人必须中止“王婆卖瓜”的陈述,因为一切的不足或友好,都需阁下在使用过程中去发现. jquery弹出层,布布扣,bubuko.com

JQuery弹出层,实现弹层切换,可显示可隐藏。

1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <title>jQuery弹出层效果</title> 5 <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> 6 <meta c

JQuery弹出层,点击按钮后弹出遮罩层,有关闭按钮

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery弹出层效果</title> <meta content="网页特效,特效代码,jQuery,css特效,Js代码,广告幻灯,图片切换" name="keywords" /> <meta content="