一个简单的js模态窗口

2024-11-09

js之模态对话框

目标效果:点击页面按钮,显示模态对话框,在模态对话框里点击取消关闭模式对话框. 效果如下实现代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <table> <tr> <td>

JQuery Dialog(JS模态窗口,可拖拽的DIV) 效果实现代码

效果图调用示意图交互示意图如上图所示,这基本是JQueryDialog的完整逻辑流程了. 1.用户点击模态窗口的“提交”按钮时,调用JQueryDialog.Ok()函数,这个函数对应了用户提交事件. 2.用OO的概念来说,JQueryDialog.Ok()其实是一个虚函数,它的逻辑封装在子窗口ContentWindow.Ok()中,这一点我借鉴了FCKEditor,如下代码所示: JS代码复制代码代码如下:var JQueryDialog = { /// <summary>提交

js模态窗口

最近在看js,正好公司用的框架中用到了模态窗口,以前没有接触过,现在把模态窗口的用法先记下来. 常用的浏览器chrome,Firefox,ie11,这三种分别支持document.open(),window.showModalDialog(),window.showModalDialog()的方式.下面还是直接给出代码,比较直观: motaichuangkou.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//E

一个简单的js面试题

在js群里看到有人发问,于是抱着练手的心态写了答了几个面试题,题目虽然不是太难,却很考验人的编程思维.汗颜,看了别人的答案后才发现自己好像笨了很多. 废话不说了 ,上代码. 1 要求给一个数组的最后一个元素加1 结果大于10则给前一个元素加1 并设置当前元素值=0:前一个元素亦是如此,例如 var a=new Array(3,9); a[1]+1; a=[3,9]; 此题看似很简单,只要最后一个元素等于10 就给钱一个元素加1,设置当前元素为0就是了,但还有一种特殊一点的情况,就是当数组的所有

一个简单的JS倒计时

看到很多商城都是抢购倒计时的功能,今天闲来无事做了个倒计时.全当学习JS. 主要思路:主要用到Date对象,声明一个变量获取当前时间,在声明一个变量获取结束时间,结束时间-当前时间=剩余时间(倒计时),中间涉及到一些简单的数学运算和取整. 注:getDay()获取到星期的时候是0~6,0为星期天.所以声明一个数组来转换成大写的星期.在数组[getDay()]就得到星期格式. HTML内容: <span>显示当前时间:</span> <span id="show&qu

JS模态窗口返回值兼容问题解决方案

因系统要兼容原IE已使用的关闭方法,经调试测得,需对window.dialogArguments进行再较验,不然易出问题. function OKEnd(vals) { if (vals == null) vals = "TRUE"; if (typeof (window.opener) == "undefined") { if (typeof (window.dialogArguments) != "undefined") { if (wind

一个简单的 js 时间对象创建

JS中获取时间很常见,凑凑热闹,也获取一个时间对象试试首先,先了解js的获取时间函数如下: var myDate = new Date(); //创建一个时间对象 myDate.getYear(); // 获取当前年份(2位) myDate.getFullYear(); // 获取当前完整的年份(4位,1970----???) myDate.getMonth(); //

Chart.js: 一个简单的 JS Chart Library

Chart.js 是一个 Open Source 的 JavaScript Chart Library.它一共有 6 中 Chart,全都是 HTML5 based. 底下是 Chart.js 所提供的 6 中 Charts的实例图形,包括了折线图.柱形图.圆饼图等,这样很容易在html网页中实现动态图的效果: Line Chart Bar Chart Radar Chart Pie Chart Polar Area Chart Doughnut Chart 快速上手你可以到 github下载

一个简单的JS日期挂历脚本

分享一个JS脚本做的日期挂历,在需要的时候可以引入你的程序. 如需单独引入这个脚本,请将它保存在一个文件中然后引入它:如这样 <script type="text/javascript" src="${pageContext.request.contextPath}/jsFile/Birthday.js" ></script> 若不需要引入,而将它作为内置与html的一部分,则在需要调用的地方调用该事件: <input id="

一个简单的js实现倒计时函数

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <met

isMobile 一个简单的JS库，用来检测移动设备

点这里 github地址:https://github.com/kaimallea/isMobile Example Usage I include the minified version of the script, inline, and at the top of the <head>. Cellular connections tend to suck, so it would be wasteful overhead to open another connection, just

一个简单的js队列，逻辑很清晰

function Queue(type) { //type 是否是一个接着一个执行 function QueueConst() {} QueueConst.execute_ing=[], QueueConst.execute_no=[], QueueConst.state=1, QueueConst.type = type?type:false QueueConst.prototype.stop=function () {//暂停 QueueConst.state=2 } QueueConst.

一个简单的js时钟

演示地址代码 <html> <head> <title> Nonove js clock 时钟 </title> <script type="text/javascript"> function Clock() { var date = new Date(); this.year = date.getFullYear(); this.month = date.getMonth() + 1; this.date = date.

一个简单的js计数器(web储存)。

<span id="countspan"></span> <a href="#" onclick="countNumber();">点击</a> <script type="text/javascript"> if(!localStorage.countAll){ localStorage.countAll = 0; } document.getElementById

js模态窗口返回值(table)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

一个简单的JS函数，用于判断文本是否数字

/****************************************************** 判断是否是数字(整数,小数均可,不包括负数)* 2014年10月10日22:38:19*****************************************************/function isNumber(str){ var re = /^([0-9]+)([.]?)([0-9]*)$/; return re.test(str);} 该函数脱胎于

js/jq基础（日常整理记录）-2-一个简单的js方法实现集合的非引用拷贝

一.一个简单的js方法实现集合拷贝做web项目的时候,少不了和js中的数组,集合等对象接触,那么你肯定会发现,在js中存在一个怪异的现象就是数组和集合的拷贝都是地址复制,并不是简单的数据的拷贝. 举个例子: //创建一个集合 var arr1=[{name:'小明',age:'22'},{name:'小刚',age:'23'}] //再创建一个空集合 var arr2=[] //开始拷贝集合arr1的第一个元素数据到集合arr2中 arr2.push(arr1[0]) //取出arr2中的数据

swift:用UITabBarController、UINavigationController、模态窗口简单的搭建一个QQ界面

搭建一个QQ界面其实是一个很简单的实现,需要几种切换视图的控制器组合一起使用,即导航控制器.标签栏控制器.模态窗口.其中,将标签栏控制器设置为window的rootViewController,因为QQ主界面有4个控制器,分别为消息.联系人.动态.我,那么创建这4个控制器,然后再为它们分别创建一个导航控制器.此时,将之前创建的那4个控制器分别设置为对应的导航控制的rootViewcontroller.最后,将这4个导航控制器设置为标签栏控制器的子控制器即可.除此之外,我们仍然需要再创建一个登录的

JS弹出模态窗口下拉列表特效

效果体验:http://hovertree.com/texiao/js/20/ 或者扫描二维码在手机体验: 点击选择城市后,在弹出的层中的输入框,输入英文字母 h,会有HoverTree和Hewenqi两个选项,可以点击要输入的项. 源码下载:http://hovertree.com/h/bjaf/95ese8s1.htm 欢迎关注微信公众号何问起,账号: ihewenqi 或者微信扫描下面二维码关注: 代码如下: <!doctype html> <html lang="zh

AnimatedModal.js – CSS3 全屏模态窗口

AnimatedModal.js 是一个用来创建一个全屏模态窗口的 jQuery 插件,基于 CSS3 过渡实现.您可以利用 Animate.css 中的转换或自行创建自己的过渡效果.支持 Firefox.Chrome.Safari.Opera 和 IE 10+ 浏览器. 在线演示源码下载您可能感兴趣的相关文章网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示十分惊艳的8个 HTML5 & JavaScript 特效 Web 开发中很

用JS做一个简单的电商产品放大镜功能

使用js制作一个简单的产品放大图购物网站的产品页经常会放有一个产品展示图区.该图区有一个功能就是产品图的放大功能,移动左侧的焦点区域,可以放大细节部分观看,详情如下图.实现该功能的方法也非常简单. 实验:制作产品焦点放大图. 所需技能:1.基本的获取页面元素的方法: 2.几个简单的事件: 3.会使用dom设置元素的属性: 案例原理:1.焦点框的跟随鼠标事件: 2.焦点框的移动区域规定: 3.大盒子内容的显示: 适合对象:js初学者 -------------------------------

一个简单的js模态窗口

热门专题