我在理解Bootstraps模式回调时遇到问题。
" .on(' show',function(){})"以下代码的一部分未触发。不知道为什么。请指教。此外,欢迎任何/所有代码优化提示。
HTML
<p><a class="bsModal" href="#" title="Bootstrap Modal">testing modal</a></p>
jQuery
// Dynamically calling Bootstrap Modal
$('.bsModal').click(function(){
var bsModalWindow = '<div class="modal" id="myModal">';
bsModalWindow += '<div class="modal-header">';
bsModalWindow += '<button type="button" class="close" data-dismiss="modal">×</button>';
bsModalWindow += '<h3>Modal header</h3>';
bsModalWindow += '</div>';
bsModalWindow += '<div class="modal-body">';
bsModalWindow += '<p>This is an example of the Bootstrap jQuery Plugin: Modal.</p>';
bsModalWindow += '</div>';
bsModalWindow += '<div class="modal-footer">';
bsModalWindow += '<a href="#" class="btn" data-dismiss="modal">Close</a>';
bsModalWindow += '<a href="#" class="btn btn-primary">Save changes</a>';
bsModalWindow += '</div>';
bsModalWindow += '</div>';
$(bsModalWindow).modal()
.on('show', function() {
console.log('Modal will be shown');
})
.on('shown', function() {
console.log('Modal was shown');
})
.on('hide', function() {
console.log('Modal will be hidden');
})
.on('hidden', function() {
console.log('Modal is hidden');
})
.show({
backdrop: true,
keyboard:true
});
});
答案 0 :(得分:9)
以下是显示动态引导模型并调用其回调函数的解决方案。
<强> HTML:强>
<div id="panel">
<div class="divbutton">
<a href="#myModal" class="btn btn-primary btn-large bsModal">
Launch Demo Modal
</a>
</div>
</div>
jQuery的:
$(function() {
var bsModalWindow = '<div class="modal hidden fade" id="myModal">';
bsModalWindow += '<div class="modal-header">';
bsModalWindow += '<button type="button" class="close" data-dismiss="modal">�</button>';
bsModalWindow += '<h3>Modal header</h3>';
bsModalWindow += '</div>';
bsModalWindow += '<div class="modal-body">';
bsModalWindow += '<p>This is an example of the Bootstrap jQuery Plugin: Modal.</p>';
bsModalWindow += '</div>';
bsModalWindow += '<div class="modal-footer">';
bsModalWindow += '<a href="#" class="btn" data-dismiss="modal">Close</a>';
bsModalWindow += '<a href="#" class="btn btn-primary">Save changes</a>';
bsModalWindow += '</div>';
bsModalWindow += '</div>';
//Append Model Div before button div on html page
$(".divbutton").before(bsModalWindow);
$(".bsModal").click(function() {
//Bind Callback functions with model events
$("#myModal").on('show', function() {
//Change Top position of modal on show call back
$("#myModal").css('top', '100%');
console.log('Modal will be shown');
}).on('shown', function() {
console.log('Modal was shown');
}).on('hide', function() {
console.log('Modal will be hidden');
}).on('hidden', function() {
console.log('Modal is hidden');
}).show({
backdrop: true,
keyboard: true
});
//Show Modal
$("#myModal").modal('show');
});
});
上做过垃圾箱