jquery弹出模态框,js弹出模态框

jQuery如何修改模态对话框的内容

head

让客户满意是我们工作的目标，不断超越客户的期望值来自于我们对这个行业的热爱。我们立志把好的技术通过有效、简单的方式提供给客户，将通过不懈努力成为客户在信息化领域值得信任、有价值的长期合作伙伴，公司提供的服务项目有：域名与空间、虚拟空间、营销软件、网站建设、山南网站维护、网站推广。

meta charset="UTF-8"

titleTitle/title

style

.hidden{

display:none;

}

.modal{

position:fixed;

width:500px;

height:300px;

top: 50%;

left: 50%;

margin-left: -200px;

margin-top: -200px;

background-color: white;

z-index:10;

}

.shadow{

position:fixed;

top: 0;

bottom: 0;

left: 0;

right: 0;

opacity:0.5;

background-color:black;

z-index: 9;

}

/style

/head

body

input onclick="add()" type="button" value="添加"/

table border="1" width="200px " id="tb"

tr

td target="hostname"1.1.1.1/td

td target="port"80/td

td target="seq"1/td

td

a class="edit"编辑/a | a class="del"删除/a

/td

/tr

tr

td target="hostname"1.1.1.2/td

td target="port"82/td

td target="seq"2/td

td

a id='i2' class="edit"编辑/a | a class="del"删除/a

/td

/tr

tr

td target="hostname"1.1.1.3/td

td target="port"84/td

td target="seq"3/td

td

a class="edit"编辑/a | a class="del"删除/a

/td

/tr

/table

div class="modal hidden"

div id="modal1"

input name="hostname" type="text"/

input name="port" type="text"/

input name="seq" type="text"/

/div

div

input type="button" value="取消"/

input type="button" value="确认" /

/div

/div

div class="shadow hidden"/div

script src="jquery-1.12.4.js"/script

script

function add() {

$('.modal,.shadow').removeClass('hidden');

$('.modal input[value="确认"]').off().on('click',function(){

//我的理解：

var hostname = $("#modal1 input[name='hostname']").val();

var port = $("#modal1 input[name='port']").val();

var seq = $("#modal1 input[name='seq']").val();

var tr = document.createElement('tr');

var td1 = document.createElement('td');

td1.innerHTML = hostname;

td1.setAttribute('target','hostname');

$(tr).append(td1);

// console.log(tr);

var td2 = document.createElement('td');

td2.innerHTML = port;

td2.setAttribute('target','port');

$(tr).append(td2);

var td3 = document.createElement('td');

td3.innerHTML = seq;

td3.setAttribute('target','seq');

$(tr).append(td3);

var td4 = document.createElement('td');

td4.innerHTML = 'a class="edit"编辑/a | a class="del"删除/a';

// $(td4).children('[class="edit"]').attr('onclick','func()'); // 用这种$('.edit').click(function() 绑定click事件，新加的点击编辑没有用，需要添加onclick才有用或直接用$('.c').delegate('a', 'click', function(){

$(tr).append(td4);

$('#tb').append(tr);

})

}

//点击edit

// $('table').delegate('a','click',function(){ 不能写$('tb') 因为这是table下的a标签添加点击功能，而这个table是固定的。而写成tr，tr是新加入的，这样就找不到a标签

$('table').delegate('a','click',function(){

//点击编辑，出现模态框

$(this).css('color','red');

$('.modal,.shadow').removeClass('hidden');

var tds = $(this).parent().prevAll(); //this：有编辑的a标签；获取到同一个tr下的所有td

//将表格中的值输入到模态框

tds.each(function(){

var val = $(this).attr('target'); //this ：当前td；（作用域，此this不同于上个this） val：当前td的target值

var txt = $(this).text();

$('.modal input[name="' + val + '"]').val(txt); //将内容添加到modal的input框中

})

$('.modal input[value="确认"]').off().on('click',function(){confirm(tds)});

// var host = $(tds[1]).text(); //tds[1] 会变成dom对象

// var port = $(tds[0]).text();

//将选中编辑的对话框的元素放入到input中

// $("input[name='hostname']").val(host);

// $("input[name='port']").val(port);

//点击确认，将修改过得值重新赋值给表格

function confirm(self){

var hostname = $("#modal1 input[name='hostname']").val();

var port = $("#modal1 input[name='port']").val();

var seq = $("#modal1 input[name='seq']").val();

console.log(11111);

self.eq(0).text(seq); // eq(0) 对应的是seq

self.eq(1).text(port);

self.eq(2).text(hostname);

}

})

// 点击删除

// $('.del').click(function() {

// $(this).parent().parent().remove();

// })

//点击取消，去除input框中的内容

$('.modal input[value="取消"]').click(function(){

$(".modal input[type='text']").val("");

$('.modal,.shadow').addClass('hidden');

})

function func() {

//点击编辑，出现模态框

$('.modal,.shadow').removeClass('hidden');

}

/script

/body

/html

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

}

});

})

如何用jquery更改bootstrap弹出框的内容

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

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

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

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

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显示

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函数可以由按钮控制。

jquery怎样弹出模态窗口，请教！

JQuery本身是没有提供这样的方法的，但JS本身就有这方法：

window.showModalDialog(URL, null, "dialogWidth:330px;dialogHeight:auto;status:no;help:no;resizable:yes;");

jquery怎么判断bootstrap模态框是否打开modal

modal 被打开后，会在body标签上增加一个 modal-open的class，直接判断这个class是否存在就可以了。

if($('body').hasClass('modal-open')){

//modal已打开

}else{

//modal没有打开

}