How to resize modal botstrap from link attribute using jquery?
I wonder if it is possible to resize the boot mod by reading the attribute from the link. For example, bootstrap modal will change from normal size to larger when the attribute is declared.
<a data-toggle="modal" data-target="#xModal" modal-size="large">xModal</a>
So jquery will listen for the click and trigger the modal style like
if($('a[attr='modal-size']') === "large"){
$('#xModal').modal('show');
$(".modal-dialog").html("modal-lg");
}
Can I get some code using this idea?
source to share
You can listen to the event show.bs.modal
and change the width with a value data-modal-width
like this:
Html
<a data-toggle="modal" data-target="#xModal" data-modal-width="900">xModal</a>
Js
$('#xModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget); // Button that triggered the modal
var modal = $(this);
modal.css('width', button.data('modal-width') + 'px');
});
source to share
I wouldn't name a modal data attribute for the simple reason you just described, you can't really control what happens in front of modal toogles. Better to use an onclick event or listen for a click on which you could do something like:
<a onclick="handleModal()" modal-size="large">xModal</a>
handleModal(){
if($('a[attr='modal-size']') === "large"){
$('#xModal').modal('show');
$(".modal-dialog").html("modal-lg");
}
}
or
<a id="x1" modal-size="large">xModal</a>
$(function(){
$('#x1').onclick(function(){
if($('a[attr='modal-size']') === "large"){
$('#xModal').modal('show');
$(".modal-dialog").html("modal-lg");
}
})
})
source to share