正文
jquery弹出提示框,jq 提示框
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
如何利用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();
}
相关问答
Q1: 用jq实现点击一个按钮,弹出提示框,用户什么都不操作5秒后自动跳转;点击关闭又跳转到其他页面
首先任何效果希望你自己动手去完成，我可以给你思路，但是必须自己动手去实现。
jquery能帮助你点击一个按钮弹出提示框，但是这个框是windows自带的alert框或者confime框等，你要那种关闭按钮的，推荐jqueryui实现。
jquery绑定click事件我和你详细说下。第一，$("#aaa").click(function(){}),第二，$("#aaa").bind("click",function(){}),第三，$("#aaa").live("click",function(){});其中第三种是动态元素事件绑定。
后面我和你讲讲用户不操作5秒后自动跳转，这个js有setTimeout这个方法，你可以试着看api或者百度去实现。
最后你要的那种效果最好使用jqueryui更为满足需求和美观
Q2: 如何使用jquery实现点击按钮弹出一个对话框
有很多方法实现的，比如使用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写也比较简单
Q3: 用jquery怎么弹出一个提示框
弄一个div里面写提示信息 然后隐藏，点击按钮click事件把div显示
Q4: jquery 如何弹出自定义对话框？
可以用jDialog插件实现，jDialog是一款基于jquery实现的轻量级多种类型的自定义对话框插件在项目开发中、一般会美化 alert()；
参考如下：
center
button id="test1"alert方式调用/button
br/br/
button id="test2"confirm方式调用/button
br/br/
button id="test3"iframe方式调用/button
br/br/
button id="test4"只显示内容对话框/button
br/br/
button id="test5"对话框配置按钮/button
br/br/
button id="test6"message方式调用/button
br/br/
button id="test7"tip方式调用/button
/center
以下是JS代码
$("#test1").click(function(){
var dialog = jDialog.alert(´欢迎使用jDialog组件´,{},{
showShadow: false,// 不显示对话框阴影
buttonAlign : ´center´,
events : {
show : function(evt){
var dlg = evt.data.dialog;
},
close : function(evt){
var dlg = evt.data.dialog;
},
enterKey : function(evt){
alert(´enter key pressed!´);
},
escKey : function(evt){
alert(´esc key pressed!´);
evt.data.dialog.close();
}
}
});
}) ;
$("#test2").click(function(){
var dialog = jDialog.confirm(´欢迎使用jDialog组件，我是confirm！´,{
handler : function(button,dialog) {
alert(´你点击了确定！´);
dialog.close();
}
},{
handler : function(button,dialog) {
alert(´你点击了取消！´);
dialog.close();
}
});
});
$("#test3").click(function(){
// 通过options参数，控制iframe对话框
var dialog = jDialog.iframe(;,{
title : ´
width : 1100,
height : 550
});
});
$("#test4").click(function(){
// 通过options参数，控制dialog
var dialog = jDialog.dialog({
title : ´自定义对话框´,
content : ´
});
});
$("#test5").click(function(){
// 通过options参数，控制dialog
var dialog = jDialog.dialog({
title : ´自定义对话框´,
content : ´;,
buttons : [
{
type : ´highlight´,
text : ´你好´,
handler:function(button,dialog)
{
dialog.close();
}
}
]
});
});
$("#test6").click(function(){
var dialog = jDialog.message(´´,{
autoClose : 3000, // 3s后自动关闭
padding : ´30px´, // 设置内部padding
modal: true // 非模态，即不显示遮罩层
});
});
$("#test7").click(function(){
var dialog = jDialog.tip(´´,{
target : $(´#test7´),
position : ´left-top´,
trianglePosFromStart :0,
autoClose : 1000,
offset : {
top :-20,
left:10,
right:0,
bottom:0
}
});
})
