扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
JQuery的弹出提示框可以有两种方式
成都创新互联是一家专业提供云龙企业网站建设,专注与做网站、成都网站设计、H5开发、小程序制作等业务。10年已为云龙众多企业、政府机构等服务。创新互联专业网络公司优惠进行中。
Alert 方式以及 Confirm 方式弹出
Alert方式的弹出提示框,只能有一种抉择,那就是确定,他这是一种不可选择的提示
Confirm方式,是带有选择功能的提示框,用户可以点击确定或者取消
[img]搜索一下
dialog插件。
$("#select_user").click(function
()
{
//绑定事件并执行
$.dialog.open({
id:
'd',
title:
'选择参会人员',
content:
'iframe
id="users"
name="users"
src="${baseURL}/user"
width="100%"
height="100%"
frameborder="0"浏览器不支持嵌入式框架。/iframe',//弹出窗口的连接
width:
'800px',
height:
'300px',
ok:
'确定',
cancel:
'取消',
lock:
false,
callback:
dlg_back//回调函数
});
});
function
dlg_back(){
alert(回调成功)
}
有很多方法实现的,比如使用alert这种比较丑的弹框,比如
btn.click(function(){
window.alert('内容')
});
或者是自己自定义的弹框,那这样的话你至少得套三个div,比如
div-----这个绝对定位到整个页面,如position:absolute;top:0;left:0;right:0;bottom:0;
div-----这个在父级元素上面做绝对定位,也就是弹框的位置
div/div----弹框内容
/div
/div
或者是jQuery UI本身所附带的对话框功能,那个百度就出来了,不过不建议用那个,感觉比较丑,还是自己写一个好看
当然你也可以试着引入其他的UI框架,比如boot都有对话框的功能,不过建议自己写,用jQuery写也比较简单
1、加上DIV弹出框
function AddRunningDiv() {
$("div class=\"datagrid-mask\"/div").css({ display: "block", width: "100%", height: $(document).height() }).appendTo("body");
$("div class=\"datagrid-mask-msg\"/div").html("正在处理,请稍候...").appendTo("body").css({ display: "block", left: ($(document.body).outerWidth(true) - 190) / 2, top: ($(document).height() - 45) / 2 });
}
2、取消所弹出的DIV
function MoveRunningDiv() {
$("div[class='datagrid-mask']").remove();
$("div[class='datagrid-mask-msg']").remove();
}
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流