先要明白,弹窗的原理是什么,
参考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({})弹出来(其实是重绘出来)。