通过javascript实现的轻量级模态框解决方案（支持Ajax）

实现模态框的解决方案在互联网上能找到不少，但是它们大多需要引入诸如Jquery、Mootools、Dojo、YUI等javascript库。如果仅仅是要实现模态框就引入庞大的类库，岂不是得不偿失。这里为大家提供一款用javascript实现的轻量级模态框解决方案TinyBox。

所谓模态框，就是在当前页面弹出一个子窗口，如果该子窗口不关闭的话，不能操作父窗口功能。

去看一下本解决方案的在线示例：浏览在线示例

作者主页（Author Website）：http://www.leigeber.com

TinyBox的功能特色：

TinyBox是一款独立的的模态框脚本，使用时不需引入其他脚本库。
TinyBox是一款轻量级模态框脚本，它的压缩版本仅有3.5k
弹出的模态框可调用HTML内容，也可通过ajax调用其它页面
可用来调用显示图片
可控制在一定时间后模态框自动关闭
可控制打开模态框时是否启用载入Loading标识
可控制模态框大小，也可选择根据模态框内容自适应大小
可通过简单的CSS控制模态框样式
该脚本在浏览器Firefox 2/3, IE 6/7/8, Opera, Safari and Chrome下测试通过

TinyBox的使用方法：

第一步当然是要先引入Tinybox脚本文件及样式
通过下面语句调用模态框：
TINY.box.show('advanced.html',1,300,150,1,3)
TINY.box.show参数解释：
第一个参数advanced.html，是要调用内容。如果是ajax调用页面，则写该页面的相对路径；如果是调用HTML内容，则传入javascript对象；
第二个参数1，用来标识是否通过ajax调用页面，是为1，否为0；
第三个参数300，用来控制弹出模态框窗口宽度，使用0则为auto自适应；
第四个参数150，用来控制弹出模态框窗口高度，使用0则为auto自适应；
第五个参数1，用来控制是否显示载入Loading标识，1启用，0不启用；
第六个参数3，标识3秒后模态框窗口自动关闭，该参数为可选，不写该参数则为不自动关闭

其它说明：

本解决方案来源：来源，有什么问题可在来源主页联系作者，当然也可在本页面留言，大家一起讨论。
作者说下个版本会引入新功能，一起期待。

下载示例源码：javascript实现的轻量级模态框解决方案 [大小：38.32 KB - 下载次数：178]

转载于:https://www.cnblogs.com/291099657/archive/2009/08/21/1551098.html

通过javascript实现的轻量级模态框解决方案（支持Ajax）相关推荐

ssm中ajax无反应,jquery + bootstrap(模态框romote) + click - ajax + SSM插入数据库没反应...
点击产生模态框,模态框使用remote远程加载.然后在模态框输入数据,ajax传输到后台insert. 但是click动作后模态框消失,数据库没有插入,没有报错,就好像没有执行js的click一样,求 ...
html模态框插件,如何使用JavaScript构建模态框插件
作为一位Web开发人员而言,模态框(Modal)并不会陌生.就我个人而言,我更为熟悉的是怎么通过CSS来编写一个模态框以及怎么通过CSS给模态框添加一些动效.正好最近工作中也和Modal框杠上了.另外 ...
轻量级Modal模态框插件cta.js
今天给大家分享一款轻量级Modal模态框插件cta.js.这是一款无需使用jQuery插件,纯js编写的模态框弹出特效.效果图如下: 在线预览源码下载实现的代码. html代码: <se ...
4 前端溢出定位模态框透明度 JavaScript简介
前端 1 溢出属性overflow 标签内部的内容超出了标签自身的范围会造成内容的溢出. overflow属性规定当内部内容溢出元素框时发生的事情. overflow: visible (默认值)内容 ...
iview的走马灯嵌套在模态框中，宽度为0的解决方案
在项目开发中用到了iview的走马灯嵌套在模态框中这种需求,结果发现走马灯图片不显示,打开控制台审查元素发现走马灯的内部盒子width为0,自己感觉在页面初始化的时候,因为模态框初始值为false,所 ...
HTML+CSS+JavaScript实现模态框（可拖拽）
前言模态框是指覆盖在父窗口上的子窗口,但在HTML网页中,并没有父窗口和子窗口的概念.这里是通过可隐藏的遮罩层和一个可隐藏的盒子来实现模态框的效果. 效果演示: 下面开始详细介绍如何实现一个可拖拽的 ...
vue项目使用bootstrap模态框叠加滚动条及蒙层解决方案
部分结构代码展示 //第一层模态框 <div class="modal fade" id="addModal1" ><div class=&q ...
Bootstrap 模态框（Modal）
#Bootstrap 模态框(Modal)插件详细讲解 #####第一步: 加载框架: https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jque ...
Bootstrap4模态框垂直居中
Bootstrap4模态框垂直居中,只需要在添加.modal-dialog类的div再添加一个.modal-dialog-centered就可以了.具体如下. Bootstrap4模态框默认不会居中显 ...

通过javascript实现的轻量级模态框解决方案（支持Ajax）

通过javascript实现的轻量级模态框解决方案（支持Ajax）相关推荐

最新文章

热门文章