wBox轻量级的弹出窗口jQuery插件,基于jQuery1.4.2开发,主要实现弹出框的效果,并且加入了很多有趣的功能,比如callback函数,显示隐藏层,Ajax页面,iframe嵌入页面等功能
WBox功能特点
1. 背景透明度可以根据实际情况进行调节
2. 可以根据需要添加wBox标题
3. 支持callback函数
4. 支持html内容自定义
5. 支持在wBox显示#ID的内容
6. 支持Ajax页面内容
7. 支持iframe
8. 支持wBox拖拽功能
9. ESC键,或者在背景上双击即可关闭wBox
10. Class为wBox_close点击可以关闭wBox,无论是组装的html,还是隐藏的html,甚至于iframe的内容中的.wBox_close
工作常要用到wbox,今天刚好用到,看看源码,其实很简单. (function($){ //class为.wBox_close为关闭 $.fn.wBox = function(options){ // 配置项 var defaults = { wBoxURL: "css/wbox/",// 改变loading.gif图片路径
API:WBOX DEMO API ①:引入样式文件和js <link rel="stylesheet" type="text/css" href="${basePath}/css/default/wbox.css" /> <script type="text/javascript" src="${basePath}/js/jquery/wbox.js"></script> 还有一些图片需要导入到
wbox最大的陷井就是:会让页面中存在两个相同div(包括里面的所有内容[控件ID和NAME]),后面有介绍一些解决方案。 wBox特点 背景透明度可以根据实际情况进行调节 可以根据需要添加wBox标题 支持callback函数 支持html内容自定义 支持在wBox显示#ID的内容 支持Ajax页面内容 支持iFrame 支持wBox拖拽功能 ESC键,或者在背景上双击即可关闭wBox clas
最近项目测试中发现在用wbox弹出iframe窗口中,ie6下页面加载失败导致空白页面,可是查看页面源码发现页面只是加载了一部分,没有加载完成就停止了,去网上搜了下关于iframe的ie6下的兼容性问题,[转载]ie6下的iframe,问题多多。 – izumi – 博客园中介绍了有8种之多,哦买噶的!ie6你让我情何以堪!于是一一测试,终于在ie6弹出层加载完成空白后,再右键-刷新页面,页面出现
//引入js和css <script type="text/javascript" src="<?php echo geturl();?>public/js/wbox/wbox.js"></script> <link rel="stylesheet" type="text/css" href="<?php echo geturl();?>public/js/wbox/wbox/wbox.css"
文字提示(带标题) <div class="ui-dialog show"> <div class="ui-dialog-cnt"> <div class="ui-dialog-bd"> <h3>下线通知</h3> <p>你的账号于17:00在一台Android手机登录。如非本人操作,密码可能已泄露,建议立即冻结账号。
说明 调用方法: $.f2e.util.dialog.open(options) //创建弹窗 $.f2e.util.dialog.close() //关闭弹窗 函数说明: 弹窗 参数说明: 参数名 类型 说明 备注 width int 宽度 无 height int 高度 无 mask boolean 是否显示蒙层 默认 true close boolean 是否显示关闭按钮 默认 true
本文向大家介绍layer弹窗插件操作方法详解,包括了layer弹窗插件操作方法详解的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了layer弹窗插件操作方法。分享给大家供大家参考,具体如下: 1、首先去http://layer.layui.com/下载插件 2、在网站上有演示说明 3、操作方法如何 手机弹窗效果 更多弹效果 特别说明:事件需自己绑定,以下只展现调用代码。 更多关于JavaS
main.js import Vue from "vue"; import { Dialog } from "feui"; window.Dialog = Dialog; 代码演示 消息提示 Dialog.alert({ title: title, skin: skin, message: "弹窗内容", confirmButtonText: "确实" }).th
主要内容:实例,实例,关闭弹窗,定位弹窗,实例,过渡,所有过渡效果实例,弹窗方向小边框,实例,弹窗对话框,实例,图片弹窗,实例,弹窗背景覆盖,实例,实例弹窗是一个非常流行的对话框,弹窗可以覆盖在页面上展示。 弹窗可用于显示一段文本,图片,地图或其他内容。 创建一个弹窗,需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性, <div> 元素添加 data-role="popup" 属性。 接着我们为 <div> 指定 id, 然后设置 <a> 的
继承自 NativeObject 所有弹出式UI元素(pop-ups)的基类。弹出式UI元素比所有其他UI的层级都高,但不属于控件。某些弹出式UI只能弹出一次。 通过 “const {Popup} = require('tabris');” 引入该类 方法 close() 返回值: this 隐藏弹出窗。 open() 返回值: this 显示弹出窗。
弹窗是一个非常流行的对话框,弹窗可以覆盖在页面上展示。 弹窗可用于显示一段文本,图片,地图或其他内容。 创建一个弹窗,需要使用 <a> 和 <div> 元素。在 <a> 元素上添加 data-rel="popup" 属性, <div> 元素添加 data-role="popup" 属性。 接着我们为 <div> 指定 id, 然后设置 <a> 的 href 值为 <div> 指定的 id。 <di
说明 调用方法1: $.f2eAct.video(options); 函数说明: 视频弹窗 参数说明: 参数名 类型 说明 备注 width int 视频宽度 必要 height int 视频高度 必要 url string 视频地址 必要 类绑定 <html> <div class="f2e-act-video" data-width="500" data-height="400"