jQuery,实现想弹出什么,弹出什么(弹出提示、弹出一个新的页面等等)
先要明白,弹窗的原理是什么,
参考html页面,弹窗(原始的alert(),jquery的alertWin),原理是什么?:http://blog.csdn.net/ideality_hunter/article/details/72868756
弹出是假,重绘是真。其实是出发某个JavaScript之后,对当前页面进行了重绘(即重新组合html页面给浏览器,浏览器重新解析,给人一种弹出的感觉)。
-------因此,弹出其实是重绘。
框架一般都提供了重绘的方法,来实现弹出效果,如jQuery的 model({ })方法。
参考文档:http://www.jq22.com/jquery-info505
----------------------亲手实践
使用基于jQuery的amazeui框架,实现过程如下:
function alerttest(t) {//点击,查询该识别号,有多少个船;弹出列表if ($('*[index-alert]').length > 0) {$('*[index-alert]').each(function(i, n) {$(n).remove();})}var numberNo= $("#numberNo").val();var data = {};data["numberNo"] = numberNo;var win = [];win.push('<div class="am-modal am-modal-alert" index-alert tabindex="-1" style="width:600px;height:400px">');//这里标红class用来通过css控制这个div不显示,如果没有这个话,随着后面 $('body').append($win);的执行,会
win.push('<div class="am-modal-dialog" style="border:1px solid #000;">'); win.push('<div class="am-modal-hd" style="text-align:left">'); win.push('<div data-am-widget="titlebar" class="am-titlebar am-titlebar-default" >'); win.push('<h2 class="am-titlebar-title">'); win.push("列表"); win.push('</h2>'); win.push('</div>'); win.push('</div>'); win.push('<div class="am-modal-bd am-scrollable-horizontal">'); win.push('<table class="am-table am-table-bordered am-text-nowrap">'); win.push('<thead>'); win.push('<tr>'); win.push('<th type="indexcolumn" style="text-align: center; width: 60px">序号</th>'); win.push('<th type="checkcolumn" field="NAME" style="width: 40px;">名称</th>'); win.push('<th type="checkcolumn" field="TIME" style="width: 40px;">时间</th>'); win.push('<th style="width: 160px">等级</th>'); win.push('<th style="width: 160px">类型</th>'); win.push('</tr>');; win.push('</thead>'); win.push('<tbody>'); var href = serviceUrl.url1 + "/ship/getShipByNo"; $.ajax( { url : href, async : false, data : data, type : "post", cache : false, dataType : "json", success : function(F, D, C) { var xqo = eval(F); var s = xqo.data; for (var i in s) { win.push('<tr>'); win.push('<td>'); win.push(Number(i) + 1); win.push('</td>'); win.push('<td>'); win.push(s[i].NAME); win.push('</td>'); win.push('<td>'); win.push(s[i].TIME); win.push('</td>'); win.push('<td>'); win.push(s[i].GRADE); win.push('</td>'); win.push('<td>'); win.push(s[i].TYPE); win.push('</td>'); win.push('</tr>') } }}) ; win.push('</tbody>') win.push('</table>'); win.push('</div>'); win.push('<div class="am-modal-footer">'); win.push('<span class="am-modal-btn">关闭</span>') win.push('</div>'); win.push('</div>'); win.push('</div>'); var $win = $(win.join('')); $('body').append($win);//先添加到body的最后,即所有html代码的最后。 var $modal = $('*[index-alert]');//找到我要弹出的html代码 $modal.modal( {});//关键是这个,实现弹出效果;即jQuery的重绘,给人弹出的效果}
如果不加"am-modal am-modal-alert" ,效果是这样的,不但弹出显示,在灰色的的区域也显示:
model({})中大括号是用来设置,宽度,在页面中的弹出位置等使用的。 http://www.jq22.com/jquery-info505可以看出,jQuery的model,任意弹出,实现原理是,先将要弹出的代码放在html页面中,并隐藏起来,然后通过model({})弹出来(其实是重绘出来)。
jQuery,实现想弹出什么,弹出什么(弹出提示、弹出一个新的页面等等)相关推荐
- django界面上弹出bootstrap modal对话框,对话框中包含iframe并请求一个新的页面
1.首先,需求是这样的,点击编辑学生信息的操作,弹出个添加学生课程的对话框,在对话框中需要一个选择学生课程的输入框,点击时,弹出选择课程的对话框并包含iframe,这个iframe是请求一个view的 ...
- linux下pdb文件除水,Linux命令删除文本里rmsd20行,输入到一个新的文本,然后提取出相应的pdb id。...
Linux命令删除文本里rmsd>20行,输入到一个新的文本,然后提取出相应的pdb id. 文本名字为 rmsd.dat, 文本内容是如下: refer.pdb - complex_patch ...
- .net mvc ajax重定向,如何在MVC3 JQuery的Ajax调用重定向到新的页面(连同模型)(How to redirec...
我已经忘记密码页面,当用户输入用户名并点击"验证"按钮来检查他是在哪个组的基础上,我们需要显示不同的局部视图(现在让我们说,这是电话号码)的组这一页. 填写有效信息后, 成功我会重 ...
- [js]uploadify结合jqueryUI弹出框上传,js中的冒出的bug,又被ie坑了
引言 最近在一个项目中,在用户列表中需要对给没有签名样本的个别用户上传签名的样本,就想到博客园中上传图片使用弹出框方式,博客园具体怎么实现的不知道,只是如果自己来弄,想到两个插件的结合使用,在弹出框中 ...
- php 弹窗代码大全,PHP_asp.net弹出窗口代码大全,//关闭,父窗口弹出对话框,子窗 - phpStudy...
asp.net弹出窗口代码大全 //关闭,父窗口弹出对话框,子窗口直接关闭 this.Response.Write(""); //关闭,父窗口和子窗口都不弹出对话框,直接关闭 th ...
- 【JavaScript】input提示弹出框
一.先设计出提示框的样式,给出以下注意点: width: max-content; //提示框宽度可跟随文字的数量自动变化 我尝试过使用 width: fit-content; 在Chrome浏览器中 ...
- selenium,设置火狐浏览器下载文件时不要弹出弹框问题、以标签页打开新的页面及设置失效问题
使用火狐浏览器做自动化时, 1.火狐浏览器下载文件会弹出弹框,可以通过设置火狐浏览器不要弹出弹框的方式,来完成自动化测试 def setup_method(self):# 创建一个存放自定义浏览器配置 ...
- android 弹出菜单环形,『Android自定义View实战』实现一个小清新的弹出式圆环菜单...
前言 Android表现快捷菜单的形式有很多种,比如使用PopupWindow弹出来的小弹窗,类似QQ的侧拉功能菜单,以及之前讲过的弧形菜单( Android 自定义弧形旋转菜单栏--卫星菜单),这次 ...
- 自动弹窗被拦截 html,弹出式窗口被阻止怎么办,如何阻止弹出式窗口
很多人看到"弹出式窗口"这个名词时想必会有所疑惑,弹出与固定式窗口究竟有何不同呢?其实我们在浏览网页的时候就会发现许多弹出式窗口,这种窗口主要应用于广告类,许多商家会为各种大小网页 ...
最新文章
- 让学生网络相互学习,为什么深度相互学习优于传统蒸馏模型?| 论文精读
- javascript-数据类型,json与数组,获取非行间样式
- ASP.NET DataSet查询结果转换为JSON格式数据
- c语言位运算符读音,C语言六种位运算符
- 向代码节添加代码编程实现
- WeChat微信支付类型与支付授权目录配置与回调地址设置
- org.springframework.amqp.AmqpConnectException java.net.ConnectException的解决办法
- 理论基础 —— 二叉树 —— 线索链表
- flex图表坐标轴样式设置
- r语言初学者指南_由R入统:R语言统计学类书籍推荐
- Mac 应用开发--Cocoa运用程序显示或隐藏MainNemu
- 数码博主自用五款高性价比蓝牙耳机分享,双11不想踩雷选什么蓝牙耳机好?
- 古剑飞仙手游Linux系统服务器架设教程
- Java break outer和continue outer的用法
- 儿童周成就任务全攻略
- 儿子满墙奖状却没考上重点高中,妈妈愤怒撕下痛哭:不读出去打工
- 43 岁硅谷技术大拿命丧街头,真凶落网:熟人作案,是 Expand IT 创始人
- VPython三维仿真(NO.5) 移动模型和调整姿态
- python遗传算法排课表_遗传算法与Python图解
- mc一进服务器就未响应,大佬们这得怎么办啊,一进服务器游戏就崩溃,