JQuery弹出层(信息提示)
需求：一简单JQuery弹出层DEMO，用来做信息提示，代码越少越好背景：
//后台已经设好了提示信息
request.setAttributes("msg", "添加成功!");
要求：DEMO(in JSP)
速度速度，O(∩_∩)O~ --------------------编程问答-------------------- jquery:
(function(E){E.fn.drag=function(L,K,J){if(K){this.bind("dragstart",L)}if(J){this.bind("dragend",J)}return !L?this.trigger("drag"):this.bind("drag",K?K:L)};var A=E.event,B=A.special,F=B.drag={not:":input",distance:0,which:1,dragging:false,setup:function(J){J=E.extend({distance:F.distance,which:F.which,not:F.not},J||{});J.distance=I(J.distance);A.add(this,"mousedown",H,J);if(this.attachEvent){this.attachEvent("ondragstart",D)}},teardown:function(){A.remove(this,"mousedown",H);if(this===F.dragging){F.dragging=F.proxy=false}G(this,true);if(this.detachEvent){this.detachEvent("ondragstart",D)}}};B.dragstart=B.dragend={setup:function(){},teardown:function(){}};function H(L){var K=this,J,M=L.data||{};if(M.elem){K=L.dragTarget=M.elem;L.dragProxy=F.proxy||K;L.cursorOffsetX=M.pageX-M.left;L.cursorOffsetY=M.pageY-M.top;L.offsetX=L.pageX-L.cursorOffsetX;L.offsetY=L.pageY-L.cursorOffsetY}else{if(F.dragging||(M.which>0&&L.which!=M.which)||E(L.target).is(M.not)){return }}switch(L.type){case"mousedown":E.extend(M,E(K).offset(),{elem:K,target:L.target,pageX:L.pageX,pageY:L.pageY});A.add(document,"mousemove mouseup",H,M);G(K,false);F.dragging=null;return false;case !F.dragging&&"mousemove":if(I(L.pageX-M.pageX)+I(L.pageY-M.pageY)<M.distance){break}L.target=M.target;J=C(L,"dragstart",K);if(J!==false){F.dragging=K;F.proxy=L.dragProxy=E(J||K)[0]}case"mousemove":if(F.dragging){J=C(L,"drag",K);if(B.drop){B.drop.allowed=(J!==false);B.drop.handler(L)}if(J!==false){break}L.type="mouseup"}case"mouseup":A.remove(document,"mousemove mouseup",H);if(F.dragging){if(B.drop){B.drop.handler(L)}C(L,"dragend",K)}G(K,true);F.dragging=F.proxy=M.elem=false;break}return true}function C(M,K,L){M.type=K;var J=E.event.handle.call(L,M);return J===false?false:J||M.result}function I(J){return Math.pow(J,2)}function D(){return(F.dragging===false)}function G(K,J){if(!K){return }K.unselectable=J?"off":"on";K.onselectstart=function(){return J};if(K.style){K.style.MozUserSelect=J?"":"none"}}})(jQuery);
前台调用：Execute.drag.show(400,300,"","url");
这是公司的前端做的，不知道LZ用不用的上
--------------------编程问答-------------------- http://xz.qupan.com/down/awaterway_6042963.html
效果还不错 --------------------编程问答-------------------- 关注，帮顶，接分 --------------------编程问答-------------------- 代码尽可能要少，最好带注释，哈哈，速度速度呀~~~ --------------------编程问答-------------------- 人呢都？
原来页面底部的弹出代码
<c:if test="${!empty(msg)}">
<script language="javascript" type="text/javascript">
alert("${msg}");
</script>
</c:if>
现在用JQuery的弹出层来替代alert();
最好实现遮罩效果，3秒后自动关闭，come on my guys!
O(∩_∩)O~ --------------------编程问答-------------------- 帮顶了 嘿 --------------------编程问答-------------------- 网上一大堆。 个人找B，G。 --------------------编程问答-------------------- 自己写一个比你这样找还快。
不就是弹出2个层吗？ --------------------编程问答--------------------
惭愧了，找了一堆，都不和要求，自己也在看JQuery，不熟。。。 --------------------编程问答-------------------- 解决了吗，兄弟，能提供给看看啊 --------------------编程问答-------------------- easyDialog v2.0
http://stylechen.com/tag/dialog
楼主这个绝对简单好用 我目前找了很多 后面直到我找到这个 --------------------编程问答--------------------
easyDialog.open({
container : {
header : '弹出层标题',
content : '欢迎使用easyDialog : )',
yesFn : btnFn,
noFn : true
}
});
--------------------编程问答--------------------
只要再加个参数就可以延时关闭例如
--------------------编程问答-------------------- bootstrap的modal
easyDialog.open({
container : {
content : '弹出层将在2秒后关闭...'
},
autoClose : 2000
});
bootstrap是twitter的js ui框架，用的也是jquery挺不错的，但小心和jquery ui的冲突 --------------------编程问答-------------------- 可以去jquery -ui官方网站 去找、
都是有遮罩层的、
可以自己添加按钮、以及按钮的响应事件、
也很方便的根据自己的需求来修改、
引用css：jqueryui/css/ui-lightness/jquery-ui-1.8.18.custom.css
引用js：jqueryui/js/jquery-ui-1.8.18.custom.min.js
<script>
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-message" ).dialog({
height: 120,
width: 220,
modal: true,
buttons: {
"否": function() {
//dosomething
$( this ).dialog( "close" );
},
"是": function() {
//dosomething
$( this ).dialog( "close" );
}
}
});
</script>
<div id="dialog-message" title="消息框" style="display:none;height: 120px; width:220px;">我是弹出的消息框</div>
--------------------编程问答-------------------- 为什么要JQ的 我有纯JS的，比较通用！
补充：Java , Web 开发
