建站
咨詢
售后
建站咨詢
新聞中心
如何用jquery更改bootstrap彈出框的內(nèi)容
使用jquery更改bootstrap彈出框的內(nèi)容，可以使用Jquery的load()方法，動(dòng)態(tài)加載不同的模態(tài)框（彈出框）內(nèi)容，然后填充到頁(yè)面的彈出框div中：
10年積累的成都網(wǎng)站制作、成都網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先制作網(wǎng)站后付款的網(wǎng)站建設(shè)流程，更有印江免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
主頁(yè)面只保留彈出框最外面的那個(gè)div
div?class="modal?fade"?id="myModal"?/div
動(dòng)態(tài)加載的彈出框內(nèi)容頁(yè)面中包括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()方法，在點(diǎn)擊不同的按鈕時(shí)動(dòng)態(tài)先動(dòng)態(tài)加載內(nèi)容到模態(tài)框的div中，然后再讓bootstrap顯示
script??
//?模態(tài)對(duì)話框隱藏時(shí)移除數(shù)據(jù)??
$("#myModal").on("hidden",?function()?{????
$(this).removeData("modal");??
});???
//?顯示模態(tài)對(duì)話框??
var?showModal?=?function()?{???
var?remote?=?"/test/showModal";??
if?(remote?!=?"")?{????
$("#myModal").load(remote,?function()?{????
$("#myModal").modal('show');???
});??
}};??
/script
其中showModal函數(shù)可以由按鈕控制。
怎么用jquery代碼動(dòng)態(tài)設(shè)置bootstarp的模態(tài)框高度大小
設(shè)置modal的寬度
div class="modal-dialog" style="width:800px;" 1
只有在這個(gè)class 對(duì)應(yīng)的div才有效
設(shè)置modal的高度
jQuery如何修改模態(tài)對(duì)話框的內(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="確認(rèn)" /
/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="確認(rèn)"]').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事件，新加的點(diǎn)擊編輯沒(méi)有用，需要添加onclick才有用或直接用$('.c').delegate('a', 'click', function(){
$(tr).append(td4);
$('#tb').append(tr);
})
}
//點(diǎn)擊edit
// $('table').delegate('a','click',function(){ 不能寫(xiě)$('tb') 因?yàn)檫@是table下的a標(biāo)簽添加點(diǎn)擊功能，而這個(gè)table是固定的。而寫(xiě)成tr，tr是新加入的，這樣就找不到a標(biāo)簽
$('table').delegate('a','click',function(){
//點(diǎn)擊編輯，出現(xiàn)模態(tài)框
$(this).css('color','red');
$('.modal,.shadow').removeClass('hidden');
var tds = $(this).parent().prevAll(); //this：有編輯的a標(biāo)簽；獲取到同一個(gè)tr下的所有td
//將表格中的值輸入到模態(tài)框
tds.each(function(){
var val = $(this).attr('target'); //this ：當(dāng)前td；（作用域，此this不同于上個(gè)this） val：當(dāng)前td的target值
var txt = $(this).text();
$('.modal input[name="' + val + '"]').val(txt); //將內(nèi)容添加到modal的input框中
})
$('.modal input[value="確認(rèn)"]').off().on('click',function(){confirm(tds)});
// var host = $(tds[1]).text(); //tds[1] 會(huì)變成dom對(duì)象
// var port = $(tds[0]).text();
//將選中編輯的對(duì)話框的元素放入到input中
// $("input[name='hostname']").val(host);
// $("input[name='port']").val(port);
//點(diǎn)擊確認(rèn)，將修改過(guò)得值重新賦值給表格
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) 對(duì)應(yīng)的是seq
self.eq(1).text(port);
self.eq(2).text(hostname);
}
})
// 點(diǎn)擊刪除
// $('.del').click(function() {
// $(this).parent().parent().remove();
// })
//點(diǎn)擊取消，去除input框中的內(nèi)容
$('.modal input[value="取消"]').click(function(){
$(".modal input[type='text']").val("");
$('.modal,.shadow').addClass('hidden');
})
function func() {
//點(diǎn)擊編輯，出現(xiàn)模態(tài)框
$('.modal,.shadow').removeClass('hidden');
}
/script
/body
/html
jquery怎么判斷bootstrap模態(tài)框是否打開(kāi)modal
modal 被打開(kāi)后，會(huì)在body標(biāo)簽上增加一個(gè) modal-open的class，直接判斷這個(gè)class是否存在就可以了。
if($('body').hasClass('modal-open')){
//modal已打開(kāi)
}else{
//modal沒(méi)有打開(kāi)
}
使用jQuery將多條數(shù)據(jù)插入模態(tài)框的實(shí)現(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原
價(jià)/td
/tr
/table
/div
div
class="modal-footer"
/div
/div
/div
代碼如下:
/**
*
查看數(shù)據(jù)詳情
*
@黑眼詩(shī)人
;
*/
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)框的特點(diǎn)
URL標(biāo)題：http://www.ef60e0e.cn/article/dscdoig.html
