jquery弹出窗,jquery弹出窗口多次点击

如何利用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: 如何将jquery dialog修改为bootstrap的弹出框

使用jquery更改bootstrap弹出框的内容，可以使用Jquery的load()方法，动态加载不同的模态框（弹出框）内容，然后填充到页面的弹出框div中：

主页面只保留弹出框最外面的那个div

1

div class="modal fade" id="myModal" /div

动态加载的弹出框内容页面中包括bootstrap模态框中的head、body和footer部分

1

2

3

4

5

6

7

8

9

div class="modal-header"

h3模态框header /h3

/div

div class="modal-body"

p模态框body/p

/div

div class="modal-footer"

p模态框footer/p

/div

利用jquery的load()方法，在点击不同的按钮时动态先动态加载内容到模态框的div中，然后再让bootstrap显示

1

2

3

4

5

6

7

8

9

10

11

12

13

14

script

// 模态对话框隐藏时移除数据

$("#myModal").on("hidden", function() {

$(this).removeData("modal");

});

// 显示模态对话框

var showModal = function() {

var remote = "/test/showModal";

if (remote != "") {

$("#myModal").load(remote, function() {

$("#myModal").modal('show');

});

}};

/script

其中showModal函数可以由按钮控制。

Q2: jQuery中的弹出窗口怎么写

1、你肯定会有一个按钮点击事件Onclick（）之类的，点击可以弹出dialog,还会有一个div加载需要dialog的需要的数据等。

2、$("#divId").dialog（{

里面类似easyui的dialog;

}）

3.点击事件在js添加一个$("#divId").dialog("open");

即可，希望可以帮助到你，望采纳!

Q3: 如何使用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写也比较简单

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

}

});

})