KrMa KrMa - 1 month ago 5
HTML Question

change size of bootstrap pop up

I am not sure where I can edit the bootstrap modal pop-up on my portfolio? It is the chili picture in the bottom on this site. At the moment it shows in 1000*600px, but I would like it bigger.

Link to my portfolio

HTML

<div class="col-md-3 col-sm-6 col-xs-12">
<article class="block-thumbnail">
<div class="block-image">
<div class="overlay"></div>
<img
class="coursepic"
src="/images/thumbs/image1.jpg"
data-toggle="modal"
data-target="#myModal1"
alt="Trolltunga, Norway"
>
</div>
<div class="block-data">
<h3>
Test
</h3>
</div>
</article>
</div>


CSS

img.coursepic {
width: 100%;
height: 100%;
}
img.coursepic:hover{
cursor: pointer;
opacity: 0.5;
background: rgba(0,0,0,0.5);
border-radius: 2px;
width: 100%;
height: 100%;
}


JS

function centerModal() {
$(this).css('display', 'block');
var $dialog = $(this).find(".modal-dialog");
var offset = ($(window).height() - $dialog.height()) / 2;
// Center modal vertically in window
$dialog.css("margin-top", offset);
}

$('.modal').on('show.bs.modal', centerModal);
$(window).on("resize", function () {
$('.modal:visible').each(centerModal);
});

Answer

Its working fine with modal-lg

add this snippet in your centerModal()

$dialog.addClass("modal-lg");

enter image description here