jquery模态框,jquery模态框的特点

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

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

10年积累的成都网站制作、成都网站建设经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先制作网站后付款的网站建设流程，更有印江免费网站建设让你可以放心的选择与我们合作。

主页面只保留弹出框最外面的那个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代码动态设置bootstarp的模态框高度大小

设置modal的宽度

div class="modal-dialog" style="width:800px;" 1

只有在这个class 对应的div才有效

设置modal的高度

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怎么判断bootstrap模态框是否打开modal

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

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

//modal已打开

}else{

//modal没有打开

}

使用jQuery将多条数据插入模态框的实现代码

代码如下:

//Bootstrap模态框（局部）

div

class="modal

fade"

id="orderDetail"

div

class="modal-dialog"

div

class="modal-content"

div

class="modal-header"

/div

div

class="modal-body"

table

class="table"

tr

td名

称/td

td原

价/td

/tr

/table

/div

div

class="modal-footer"

/div

/div

/div

代码如下:

/**

*

查看数据详情

*

@黑眼诗人

;

*/

function

orderDetail(order_no)

{

//1.先清空模态框数据

$('#orderDetail').find('tr').first().nextAll().remove();

//2.外部插入

var

order_no

=

order_no;

$.post(base_url

+

'?d=adminc=ordersm=ajax_order_detail',

{order_no:order_no},

function(data){

//数据的格式如：

[{no:123,old:abc},{no:234,old:def},{no:345,old:ghi}]

var

obj

=

eval('('

+

data

+

')');

$.each(obj,

function(i,

n){

var

tr

=

$('#orderDetail').find('tr').last();

tr.after("trtd"+

n['organize_name']

+

"："

+

n['cate_name']

+

"

--

"

+

n['course_name']

+"/tdtd"+

n['old_price']

+"/tdtd"

+

n['sale_price']

+

"/td/tr");

});

});

}