如何用jquery更改bootstrap彈出框的內(nèi)容

使用jquery更改bootstrap彈出框的內(nèi)容，可以使用Jquery的load()方法，動態(tài)加載不同的模態(tài)框（彈出框）內(nèi)容，然后填充到頁面的彈出框div中：

10年積累的成都網(wǎng)站制作、成都網(wǎng)站建設經(jīng)驗，可以快速應對客戶對網(wǎng)站的新想法和需求。提供各種問題對應的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡服務。我雖然不認識你，你也不認識我。但先制作網(wǎng)站后付款的網(wǎng)站建設流程，更有印江免費網(wǎng)站建設讓你可以放心的選擇與我們合作。

主頁面只保留彈出框最外面的那個div

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

動態(tài)加載的彈出框內(nèi)容頁面中包括bootstrap模態(tài)框中的head、body和footer部分

div?class="modal-header"???

h3模態(tài)框header?/h3??

/div???

div?class="modal-body"???

p模態(tài)框body/p??

/div???

div?class="modal-footer"???

p模態(tài)框footer/p???

/div

利用jquery的load()方法，在點擊不同的按鈕時動態(tài)先動態(tài)加載內(nèi)容到模態(tài)框的div中，然后再讓bootstrap顯示

script??

//?模態(tài)對話框隱藏時移除數(shù)據(jù)??

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

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

});???

//?顯示模態(tài)對話框??

var?showModal?=?function()?{???

var?remote?=?"/test/showModal";??

if?(remote?!=?"")?{????

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

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

});??

}};??

/script

其中showModal函數(shù)可以由按鈕控制。

怎么用jquery代碼動態(tài)設置bootstarp的模態(tài)框高度大小

設置modal的寬度

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

只有在這個class 對應的div才有效

設置modal的高度

jQuery如何修改模態(tài)對話框的內(nèi)容

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(){

//點擊編輯，出現(xiàn)模態(tài)框

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

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

var tds = $(this).parent().prevAll(); //this：有編輯的a標簽；獲取到同一個tr下的所有td

//將表格中的值輸入到模態(tài)框

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); //將內(nèi)容添加到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框中的內(nèi)容

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

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

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

})

function func() {

//點擊編輯，出現(xiàn)模態(tài)框

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

}

/script

/body

/html

jquery怎么判斷bootstrap模態(tài)框是否打開modal

modal 被打開后，會在body標簽上增加一個 modal-open的class，直接判斷這個class是否存在就可以了。

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

//modal已打開

}else{

//modal沒有打開

}

使用jQuery將多條數(shù)據(jù)插入模態(tài)框的實現(xiàn)代碼

代碼如下:

//Bootstrap模態(tài)框（局部）

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

代碼如下:

/**

*

查看數(shù)據(jù)詳情

*

@黑眼詩人

;

*/

function

orderDetail(order_no)

{

//1.先清空模態(tài)框數(shù)據(jù)

$('#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){

//數(shù)據(jù)的格式如：

[{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");

});

});

}

本文題目：jquery模態(tài)框,jquery模態(tài)框的特點
轉(zhuǎn)載來源：http://www.rwnh.cn/article6/dscdoig.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、品牌網(wǎng)站建設、云服務器、域名注冊、外貿(mào)網(wǎng)站建設、外貿(mào)建站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)