how to change the default positioning of modal in bootstrap?

how to change the default positioning of modal in bootstrap? - javascript

<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
how can I change the default modal position in bootstrap, where should I edit to change the default position.

Add the following css to your html and try changing the top, right, bottom, left values.
.modal {
position: absolute;
top: 10px;
right: 100px;
bottom: 0;
left: 0;
z-index: 10040;
overflow: auto;
overflow-y: auto;
}

I get a better result setting this class:
.modal-dialog {
position: absolute;
top: 50px;
right: 100px;
bottom: 0;
left: 0;
z-index: 10040;
overflow: auto;
overflow-y: auto;
}
With bootstrap 3.3.7.
(all credits to msnfreaky for the idea...)

To change the Modal position in the viewport you can target the Modal div id, in this example this id is myModal3
<div id="modal3" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
#myModal3 {
top:5%;
right:50%;
outline: none;
overflow:hidden;
}

If you need to change the bottom position of the modal, you need to modify the max-height of the modal-body:
.modal-body {
max-height: 75vh;
}
As other answers have said, you can adjust the right and top on the modal-dialog :
.modal-dialog {
top: 10vh;
right: 5vw;
}
"vh" means "% of view height"
"vw" means "% of view width"

For Bootstrap 5, just add this to your css.
.modal-dialog { top: 7rem !important; }
Do not add to .modal otherwise the modal will not be dismissed when tapping on the top of the modal because backdrop is shifted down too.

In the CSS file add following lines:
.modal-dialog {
transform: translateY(50%)!important;
}
You can change 50% to any other value, which will solve the problem in your browser.

I know it's a bit late but I had issues with a modal window not allowing some links on the menu bar to work, even when it has not been triggered. But I solved it by doing the following:
.modal{
display:none;
}

Related

In Safari the center of the 3D Carousel is not right, Edge, Chrome is working fine

I'm using the Guid here: https://www.sitepoint.com/building-3d-rotating-carousel-css-javascript/, it works fine but not in safari. I try to find out what Safari does different to other Browser in this case. I guess a certain Math function like: theta = 2 * Math.PI / numImages,in Safari creates another reference to find a center in 3D space, z axis.
I can't really dig much deeper myself. I should try to move the object bit more far from Screen on z axis
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head
<body>
<div class="carousel">
<figure>
<img src="https://source.unsplash.com/7mUXaBBrhoA/800x533" alt="" name="bar">
<img src="https://source.unsplash.com/bjhrzvzZeq4/800x533" alt="" name="bar1">
<img src="https://source.unsplash.com/EbuaKnSm8Zw/800x533" alt="" name="bar2">
<img src="https://source.unsplash.com/kG38b7CFzTY/800x533" alt="" name="bar3">
<img src="https://source.unsplash.com/nvzvOPQW0gc/800x533" alt="" name="bar4">
<img src="https://source.unsplash.com/mCg0ZgD7BgU/800x533" alt="" name="bar5">
<img src="https://source.unsplash.com/1FWICvPQdkY/800x533" alt="" name="bar6">
<img src="https://source.unsplash.com/VkwRmha1_tI/800x533" alt="" name="bar7">
</figure>
<nav>
<button class="nav prev">Prev</button>
<button class="nav next">Next</button>
</nav>
</div>
<!-- Modal -->
<div class="modal fade" id="bar" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Options</h4>
</div>
<div class="modal-body">
<p>Modal content..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="bar1" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal 1 Options</h4>
</div>
<div class="modal-body">
<p>Modal 1 content..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="bar2" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Options</h4>
</div>
<div class="modal-body">
<p>Modal content..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="bar3" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal 3</h4>
</div>
<div class="modal-body">
<p>Modal 3 content..</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
$('img').on('click', function(){
// $(this).css({"background-color": "yellow", "font-size": "200%"})
var name = $(this).attr('name');
// console.log(name);
$('#' + name).modal({show: true});
});
var
carousel = document.querySelector('.carousel'),
figure = carousel.querySelector('figure'),
nav = carousel.querySelector('nav'),
numImages = figure.childElementCount,
theta = 2 * Math.PI / numImages,
currImage = 0
;
nav.addEventListener('click', onClick, true);
function onClick(e) {
e.stopPropagation();
var t = e.target;
if (t.tagName.toUpperCase() != 'BUTTON')
return;
if (t.classList.contains('next')) {
currImage++;
}
else {
currImage--;
}
figure.style.transform = `rotateY(${currImage * -theta}rad)`;
}
body {
margin: 0;
font-family: "Roboto";
font-size: 16px;
display: flex;
flex-direction: column;
height: 100vh;
justify-content: center;
}
.plakat {
width: 100%
}
.carousel {
padding: 20px;
-webkit-perspective: 500px;
perspective: 500px;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
}
.carousel > * {
flex: 0 0 auto;
}
.carousel figure {
margin: 0;
width: 400px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
transition: -webkit-transform 0.5s;
transition: transform 0.5s;
transition: transform 0.5s, -webkit-transform 0.5s;
-webkit-transform-origin: 50% 50% -482.8427124746px;
transform-origin: 50% 50% -482.8427124746px;
}
.carousel figure img {
width: 100%;
box-sizing: border-box;
padding: 0 40px;
opacity: 0.9;
}
.carousel figure img:not(:first-of-type) {
position: absolute;
left: 0;
top: 0;
-webkit-transform-origin: 50% 50% -482.8427124746px;
transform-origin: 50% 50% -482.8427124746px;
}
.carousel figure img:nth-child(2) {
-webkit-transform: rotateY(0.7853981634rad);
transform: rotateY(0.7853981634rad);
}
.carousel figure img:nth-child(3) {
-webkit-transform: rotateY(1.5707963268rad);
transform: rotateY(1.5707963268rad);
}
.carousel figure img:nth-child(4) {
-webkit-transform: rotateY(2.3561944902rad);
transform: rotateY(2.3561944902rad);
}
.carousel figure img:nth-child(5) {
-webkit-transform: rotateY(3.1415926536rad);
transform: rotateY(3.1415926536rad);
}
.carousel figure img:nth-child(6) {
-webkit-transform: rotateY(3.926990817rad);
transform: rotateY(3.926990817rad);
}
.carousel figure img:nth-child(7) {
-webkit-transform: rotateY(4.7123889804rad);
transform: rotateY(4.7123889804rad);
}
.carousel figure img:nth-child(8) {
-webkit-transform: rotateY(5.4977871438rad);
transform: rotateY(5.4977871438rad);
}
.carousel nav {
display: flex;
justify-content: center;
margin: 20px 0 0;
}
.carousel nav button {
flex: 0 0 auto;
margin: 0 5px;
cursor: pointer;
color: #333;
background: none;
border: 1px solid;
letter-spacing: 1px;
padding: 5px 10px;
}
here is a codepen: https://codepen.io/scribbi/pen/ZPRzrp
it should look like this:
But it looks like that:
As we can see here: http://thenewcode.com/736/Advanced-CSS-3D-Carousel the problem already exists, Safari "displaces the transform-origin-z coordinate for the gallery, pushing it forward in the browser"
for some reason it is rotating around the center of the fifth Image, while the first image is positioned deeper in the carousel.
Another approach here: https://codepen.io/scribbi/pen/BEjJLY is functioning in these Browsers, no SCSS is used and more hardcoding needed. As well it's not yet responsive.
maybe related: -webkit-transform-style: preserve-3d not working

Bootstrap side navbar wont collapse on link click

I am trying to build a website for a friend. I am not much in the way of coding as it has been quite a long time since I have messed with it. I am using bootstrap for this project. I cant figure out how to get the side navbar to collapse after clicking on a link. It will collapse if you click the "X" in the corner. Any help will be greatly appreciated. The website is up at this link.

Use jQuery for this:
$('#sidebar-nav a').click(function () {
$('#sidebar-wrapper').removeClass('active');
}
It will remove active class from your sidebar menu when you click on the link in it.

Just add another function to remove the active class from the sidebar-wrapper ID when a link is clicked.
// Closes the sidebar menu on link click
$("#sidebar-wrapper a").click(function (e) {
e.preventDefault();
$("#sidebar-wrapper").removeClass("active");
});
See working example Snippet.
$(document).ready(function() {
// Opens the sidebar menu
$("#menu-toggle").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Closes the sidebar menu
$("#menu-close").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").toggleClass("active");
});
// Closes the sidebar menu on link click
$("#sidebar-wrapper a").click(function(e) {
e.preventDefault();
$("#sidebar-wrapper").removeClass("active");
});
// Scrolls to the selected menu item on the page
$(function() {
$('a[href*=#]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') || location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top
}, 1000);
return false;
}
}
});
});
});
html,
body {
width: 100%;
height: 100%;
}
body {
font-family: "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.text-vertical-center {
display: table-cell;
text-align: center;
vertical-align: middle;
}
.text-vertical-center h1 {
margin: 0;
padding: 0;
font-size: 4.5em;
font-weight: 700;
}
.btn-dark {
border-radius: 0;
color: #fff;
background-color: rgba(0, 0, 0, 0.4);
}
.btn-dark:hover,
.btn-dark:focus,
.btn-dark:active {
color: #fff;
background-color: rgba(0, 0, 0, 0.7);
}
.btn-light {
border-radius: 0;
color: #333;
background-color: rgb(255, 255, 255);
}
.btn-light:hover,
.btn-light:focus,
.btn-light:active {
color: #333;
background-color: rgba(255, 255, 255, 0.8);
}
hr.small {
max-width: 100px;
}
#sidebar-wrapper {
z-index: 1000;
position: fixed;
right: 0;
width: 250px;
height: 100%;
margin-right: -250px;
overflow-y: auto;
background: #222;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
margin: 0;
padding: 0;
list-style: none;
}
.sidebar-nav li {
text-indent: 20px;
line-height: 40px;
}
.sidebar-nav li a {
display: block;
text-decoration: none;
color: #999;
}
.sidebar-nav li a:hover {
text-decoration: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 55px;
font-size: 18px;
line-height: 55px;
}
.sidebar-nav > .sidebar-brand a {
color: #999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
z-index: 1;
position: fixed;
top: 0;
right: 0;
}
#sidebar-wrapper.active {
right: 250px;
width: 250px;
-webkit-transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-ms-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
transition: all 0.4s ease 0s;
}
.toggle {
margin: 5px 5px 0 0;
}
.header {
display: table;
position: relative;
width: 100%;
height: 100%;
background: url(../img/bg.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.about {
padding: 50px 0;
}
.services {
padding: 50px 0;
}
.service-item {
margin-bottom: 30px;
}
.callout {
display: table;
width: 100%;
height: 400px;
color: #fff;
background: url(../img/callout.jpg) no-repeat center center scroll;
-webkit-background-size: cover;
-moz-background-size: cover;
background-size: cover;
-o-background-size: cover;
}
.portfolio {
padding: 50px 0;
}
.portfolio-item {
margin-bottom: 30px;
}
.img-portfolio {
margin: 0 auto;
}
.img-portfolio:hover {
opacity: 0.8;
}
.call-to-action {
padding: 50px 0;
}
.call-to-action .btn {
margin: 10px;
}
.map {
height: 500px;
}
#media(max-width:768px) {
.map {
height: 75%;
}
}
footer {
padding: 100px 0;
}
.modal-dialog {} .thumbnail {
margin-bottom: 6px;
}
.carousel-control.left,
.carousel-control.right {
background-image: none;
margin-top: 10%;
width: 5%;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css" rel="stylesheet" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /><a id="menu-toggle" href="#" class="btn btn-dark btn-lg toggle"><i class="fa fa-bars"></i></a>
<nav id="sidebar-wrapper">
<ul class="sidebar-nav"> <a id="menu-close" href="#" class="btn btn-light btn-lg pull-right toggle"><i class="fa fa-times"></i></a>
<li> <a href="#top" onclick=$ ( "#menu-close").click();>Home</a>
</li>
<li> <a href="#about" onclick=$ ( "#menu-close").click();>About</a>
</li>
<li> <a href="#services" onclick=$ ( "#menu-close").click();>Services</a>
</li>
</ul>
</nav>
<header id="top" class="header">
<div class="text-vertical-center">
<img src="img/PRECISIONLOGO.png" style="padding-bottom:2%; width: 40%; min-width:300px;">
<center>
<h1 style="font-size:5vw; max-width:85%;">DECORATE YOUR LIFE WITH PRECISION </h1>
</center>
<center>
<h3 style="font-size:3vw; max-width:75%;">Established in 2008, we have already established ourselves as one of the premier landscaping companies in South Houston</h3>
</center>
<br>
<center> Hire Us
</center>
<a href="http://www.homeadvisor.com/rated.PrecisionTree.43991652.html">
<img src="img/toprated.png" style="float:left; width:6%; min-width:70px; padding-left:15px; position: absolute; bottom:5px; left: 15px; border:0;">
<img src="img/elite.png" style="float:left; width:6%; min-width:70px; padding-left:15px; position: absolute; bottom: 17px; left: 95px;">
<img src="img/approved.png" style="float:left; width:6%; min-width:70px; padding-left:15px; position: absolute; bottom: 17px; left: 175px;">
</a>
</div>
</header>
<section id="about" class="about" style="padding-bottom:0;">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 style="color:#777">What we are all about!</h2>
<p class="lead">Precision Tree and Landscaping is a locally owned and operated company with over 6 years of experience. We take pride in our work, our goal is to make and keep every customer happy. We have consistently focused on the needs of our customers, providing
personalized attention and a stress-free experience.</p>
<img src="img/jared.jpg" style="max-width:350px; width:80%;">
<p class="lead"> <b>Jared Davis</b> Owner and Operator</p>
</div>
</div>
</div>
</section>
<section id="services" class="services bg-primary">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<h2 style="color:#d7f385;">Our Services</h2>
<hr class="small">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/banner1.png">
</span>
<h4 style="color:#d7f385;">
<strong>Landscaping Design</strong>
</h4>
<p>Allow us to redesign the exterior of your home. It can even bost the value of your home!</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#design" style="background:#abd91e; border:none;">Learn More</button>
<!-- Trigger the modal with a button -->
<div class="modal fade" id="design" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Landscaping Design</h4>
</div>
<div class="modal-body">
<p style="color:#777">We have the talent and experience to give your home a complete makeover that will make you love your home again. You can leave all the work to us or we can come up with a design together. Whether you are designing, building, renovating
a home or simply creating a complimentary landscape, we can cover all your needs.</p>
<p style="color:#777;">Our team of designers will unify your home and garden to create a personalized outdoor living space.</p>
<h2 style="color:#777;">Scope of Design Services</h2>
<ul style="color:#777; text-align:left;">
<li>Landscape Design & Installation</li>
<li>Swimming Pools, Spas & Water Features</li>
<li>Fountains, Urns, Statuary & Garden Features</li>
<li>Outdoor Kitchens, Fireplaces, Fire pits, Terraces, Patios & Driveways</li>
<li>Pergolas, Arbors, Gates & Fencing</li>
<li>Outdoor Light</li>
<li>Irrigation Systems</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/banner2.png">
</span>
<h4 style="color:#d7f385;">
<strong>Drainage</strong>
</h4>
<p>Thinking ahead and planning can make a big difference when it comes to protect your house from flooding.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#drainage" style="background:#abd91e; border:none;">Learn More</button>
<!-- Trigger the modal with a button -->
<div class="modal fade" id="drainage" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Drainage</h4>
</div>
<div class="modal-body">
<p style="color:#777">Do you have low spots in your yard? Does standing water stay for days after a rain storm? We can help you fix this. We know how annoying rain on Wednesday still standing in your back yard on Saturday can be. This can ruin -</p>
<ul style="color:#777; text-align:left;">
<li>Prevent water from entering and damaging your home</li>
<li>Prevent soil erosion in and around your home</li>
<li>Prevent mosquito infestation</li>
<li>Prevent your landscape from washout and drowning</li>
<li>Prevent standing water which causes slippery surfaces</li>
<li>Prevent overall nuisance standing water can cause</li>
</ul>
<p style="color:#777">Designing the proper drainage system for your property is more complex than you might think, but having it done correctly the first time is a simple choice. Trust Precision Tree & Landscaping with all your drainage needs.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/bannergrass1.png">
</span>
<h4 style="color:#d7f385;">
<strong>Lawn Maintanance</strong>
</h4>
<p>Maintanance is a pivotal to keep your yard looking in top shape. At Precision we have you covered.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#sprinkler" style="background:#abd91e; border:none;">Learn More</button>
<!-- Trigger the modal with a button -->
<div class="modal fade" id="sprinkler" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Lawn Maintanance</h4>
</div>
<div class="modal-body">
<p style="color:#777;">Make sure your lawn always looks fantastic with regular lawn maintenance services from Precision Tree & Landscaping. From tiny yards to large properties, our specialists can tackle all jobs (big and small). Wether your trying
to grow new, revive, or maintain an already outstanding lawn we have all the tools to tackle the job.</p>
<p style="color:#777;">Proper maintenance can lead to benefits people dont often think about. Such as-</p>
<ul style="color:#777; text-align:left;">
<li>Decreased soil errosion</li>
<li>Reduces allergen-producing weeds</li>
<li>Oxygenates the air and filters groundwater naturally</li>
<li>Absorbs nutrients and prevents leaching</li>
<li>Absorbs as much carbon dioxide as trees</li>
<li>Dissipates heat to reduce temperature</li>
<li>Adds curb appeal to your home</li>
<li>Can improve your homes value by up to 11%</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/banner4.png">
</span>
<h4 style="color:#d7f385;">
<strong>Tree Trimming & Removal</strong>
</h4>
<p>Fallen branches cause over a billion dollars in damage every year. Make sure you dont become a victim</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#tree" style="background:#abd91e; border:none;">Learn More</button>
<div class="modal fade" id="tree" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Tree Trimming and Removal</h4>
</div>
<div class="modal-body">
<p style="color:#777">Damage caused to trees by severe weather accounts for more than $1 billion in property damage in the United States each year. Broken limbs, fallen trees and wood debris propelled by strong wind damages thousands of properties annually.
Fallen trees and broken branches cause structural damage, roofing damage, siding damage, break windows, fall on cars and cause power lines to topple. Homeowners should be aware that trees located between the street and sidewalk
are usually owned by the city and removal of damaged trees are the city’s responsibility. If you have a tree that has been damaged and needs to be removed, be aware that many insurance policies cover the cost of tree removal, including
fallen branches.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="services.2" class="services bg-primary" style="padding-top:0;">
<div class="container">
<div class="row text-center">
<div class="col-lg-10 col-lg-offset-1">
<div class="row">
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/fencebanner.png">
</span>
<h4 style="color:#d7f385;">
<strong>Custom Fencing</strong>
</h4>
<p>If you are looked for a fence replacement or something for a new home. We can do that.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#fence" style="background:#abd91e; border:none;">Learn More</button>
<div class="modal fade" id="fence" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Custom Fencing</h4>
</div>
<div class="modal-body">
<p style="color:#777">Simply stated - perimeter fencing is one of the most important things to consider while either buying or building a new home. The home that you purchase will probably be the most important investment you will ever make, and there
is possibly no other feature that you can add to increase the value and marketablility of that investment - than an attractive looking perimeter fence that is professionally installed and maintained.</p>
<p style="color:#777">Let Precision help you with all your fencing needs. We can answer any questions you may have and we are always here to help</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/rockbanner.png">
</span>
<h4 style="color:#d7f385;">
<strong>Rock Installation</strong>
</h4>
<p>Whether its a custom walkway or place to relax in your backyard, the guys at percision have you covered.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#rock" style="background:#abd91e; border:none;">Learn More</button>
<div class="modal fade" id="rock" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Rock Installation</h4>
</div>
<div class="modal-body">
<p style="color:#777">We can make your dreams a reality for your custom walkways or outdoor relaxation areas. If you have an idea in your head we can get it onto paper and have it finished in no time. If you would like for us to design whatever you need,
we can do that to. Almost nothing can have as dramatic of an effect as custom stone walkways or deck areas in your back yard. The sky is truly the limit on how one of a kind your home can be with custom stone work.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/grass1.png">
</span>
<h4 style="color:#d7f385;">
<strong>Sod Installation</strong>
</h4>
<p>Building a new home? Trying to revive part of your lawn? Whatever the case, we have you covered.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#sod" style="background:#abd91e; border:none;">Learn More</button>
<div class="modal fade" id="sod" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Sod Instalation</h4>
</div>
<div class="modal-body">
<p style="color:#777">There is no job to big or small if you need sod installation we are the answer. It's back breaking work and is not advised to go at it alone. Let the guys at Precision help you out.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-3 col-sm-6">
<div class="service-item"> <span class="fa-stack fa-4x">
<img src="img/powerbanner.png">
</span>
<h4 style="color:#d7f385;">
<strong>Power Washing</strong>
</h4>
<p>Give your home a quick face lift by power cleaning siding, side walks, and driveways.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#power" style="background:#abd91e; border:none;">Learn More</button>
<!-- Trigger the modal with a button -->
<div class="modal fade" id="power" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#777">Tree Trimming and Removal</h4>
</div>
<div class="modal-body">
<p style="color:#777">Pressure washing is a fast and effective way to clean decks, siding, driveways, and other exterior areas of your property. To have it done right, without the hassle and expense of renting a power washer, call the guys at Precision
for professional power washing services and get the clean deck, siding and driveway you want, fast!</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

Responsive Bootstrap modal without page scrollbars

I have this jsFiddle: http://jsfiddle.net/jsFiddlePlayer/8XdVt/338/
The Bootstrap modal needs to fill most of the page, be placed 100px from the top of the page and not cause the page to scroll. In other words, the entire modal needs to show in the display area. It also has a background image that needs to fit the modal in responsive fashion.
I've used this SO post to help, along with this article. But how do you limit the modal to the display area without scrollbars and keep the background image responsive? As you notice, in some screen sizes, the modal cuts off the people in the picture at the knees.
The solution can include jQuery so it doesn't have to be pure CSS. Thanks.
Here's the HTML:
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#onload-popup">
Launch modal
</button>
<div class="modal fade" role="dialog" aria-hidden="true" id="onload-popup">
<div class="modal-dialog center-block">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
Content goes here.
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Here's the CSS:
.modal {
top:100px;
}
.modal-backdrop {
top:100px;
}
.modal-dialog {
width: 95%;
height: 100%;
padding: 0;
}
.modal-content {
min-height: 100%;
height: auto;
border-radius: 0;
overflow:auto;
background-size: cover;
background-image: url('data:image/jpg;base64, /* ... image code ... */');
background-repeat: no-repeat;
background-attachment: local;
background-position: center center;
}
Update: Here's close to a solution: http://jsfiddle.net/jsFiddlePlayer/8XdVt/341/ It still doesn't play nice with the background image of the modal, as it gets clipped, but I don't think there's any way around that.

Well, you need some viewport space to display the image correctly, don't know if this can help but here are the changes I made to remove scrollbars and to top-center the image (so it cannot have heads cut-off)
.modal {
top:100px;
overflow: hidden;
overflow-y: hidden;
}
.modal-content {
background-position: top center;
}

Try changing some of this css. Still there is some background image at bottom.
.modal {
top:7%;
}
.modal-backdrop {
top:10%;
}
.modal-dialog {
width: 100%;
height: 100%;
padding: 0;
}

If you want to do it on webkit you can use
.modal.fade.in::-webkit-scrollbar{
display:none
}
But I'm not sure is it possible to do it on IE using differeng way, and there is another solution;
.modal.fade.in{
overflow-y:hidden;
}
If you use second option, you should play some possition of modal to make it visible completely.

In Bootstrap open Enlarge image in modal

How do I open / enlarge an image in a modal using jquery / js and not data attributes?
Anytime a user inserts an image into a content editor I need it to be clickable to expand in a modal with js, so I cannot rely on the user to input data attributes they don't know how to use.
I tried:-
<a href="/myImage.png" id="pop">
<img src="/myImage.png" style="width: 400px; height: 264px;">
Click to Enlarge
</a>
jQuery :-
$("#pop").on("click", function() {
$(this).modal();
});
Do I need to add info to the jquery to pass the image source to appear in the modal?
Thank you!!!

You can try this code if you are using bootstrap 3:
HTML
<a href="#" id="pop">
<img id="imageresource" src="http://patyshibuya.com.br/wp-content/uploads/2014/04/04.jpg" style="width: 400px; height: 264px;">
Click to Enlarge
</a>
<!-- Creates the bootstrap modal where the image will appear -->
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 400px; height: 264px;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
JavaScript:
$("#pop").on("click", function() {
$('#imagepreview').attr('src', $('#imageresource').attr('src')); // here asign the image to the modal when the user click the enlarge link
$('#imagemodal').modal('show'); // imagemodal is the id attribute assigned to the bootstrap modal, then i use the show function
});
This is the working fiddle.

I have change it little bit but still can not do few things.
I added that clicking on it close it - it was easy but very functional.
<div class="modal-dialog" data-dismiss="modal">
I also need different description under each photo. I added description in footer just to show what I need.
It need to change with every photo.
HTML
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" data-dismiss="modal">
<div class="modal-content" >
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<img src="" class="imagepreview" style="width: 100%;" >
</div>
<div class="modal-footer">
<div class="col-xs-12">
<p class="text-left">1. line of description<br>2. line of description <br>3. line of description</p>
</div>
</div>
</div>
</div>
JavaScript:
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
Also it would be nice if this window will open only on 100% of screen.
Here picture inside with description have more than 100% and in become scrollable...
and if screen in much bigger than pictures it shoud stop only on orginal size. for ex. 900 px and no bigger in height.
http://jsfiddle.net/2ve4hbmm/

This plugin works great for me.
Bootstrap 3 lightbox plugin

I know your question is tagged as bootstrap-modal (although you didn't mention Bootstrap explicity either), but I love to see the simple way W3.CSS solved this and I think it is good to share it.
<img src="/myImage.png" style="width:30%;cursor:zoom-in"
onclick="document.getElementById('modal01').style.display='block'">
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<div class="w3-modal-content w3-animate-zoom">
<img src="/myImage.png" style="width:100%">
</div>
</div>
Here is a link to the W3Schools modal image example to see the headers to make W3.CSS work.

So I have put together a very rough modal in jsfiddle for you to take hints from.
JSFiddle
$("#pop").on("click", function(e) {
// e.preventDefault() this is stopping the redirect to the image its self
e.preventDefault();
// #the-modal is the img tag that I use as the modal.
$('#the-modal').modal('toggle');
});
The part that you are missing is the hidden modal that you want to display when the link is clicked. In the example I used a second image as the modal and added the Bootstap classes.

<div class="row" style="display:inline-block">
<div class="col-lg-12">
<h1 class="page-header">Thumbnail Gallery</h1>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="This is my title" data-caption="Some lovely red flowers" data-image="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://onelive.us/wp-content/uploads/2014/08/flower-delivery-online.jpg" alt="Short alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="The car i dream about" data-caption="If you sponsor me, I can drive this car" data-image="http://www.picturesnew.com/media/images/car-image.jpg" data-target="#image-gallery">
<img class="img-responsive" src="http://www.picturesnew.com/media/images/car-image.jpg" alt="A alt text">
</a>
</div>
<div class="col-lg-3 col-md-4 col-xs-6 thumb">
<a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-title="Im so nice" data-caption="And if there is money left, my girlfriend will receive this car" data-image="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" data-target="#image-gallery">
<img class="img-responsive" src="http://upload.wikimedia.org/wikipedia/commons/7/78/1997_Fiat_Panda.JPG" alt="Another alt text">
</a>
</div>
</div>
<div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="image-gallery-title"></h4>
</div>
<div class="modal-body">
<img id="image-gallery-image" class="img-responsive" src="">
</div>
<div class="modal-footer">
<div class="col-md-2">
<button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
</div>
<div class="col-md-8 text-justify" id="image-gallery-caption">
This text will be overwritten by jQuery
</div>
<div class="col-md-2">
<button type="button" id="show-next-image" class="btn btn-default">Next</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function(){
loadGallery(true, 'a.thumbnail');
//This function disables buttons when needed
function disableButtons(counter_max, counter_current){
$('#show-previous-image, #show-next-image').show();
if(counter_max == counter_current){
$('#show-next-image').hide();
} else if (counter_current == 1){
$('#show-previous-image').hide();
}
}
/**
*
* #param setIDs Sets IDs when DOM is loaded. If using a PHP counter, set to false.
* #param setClickAttr Sets the attribute for the click handler.
*/
function loadGallery(setIDs, setClickAttr){
var current_image,
selector,
counter = 0;
$('#show-next-image, #show-previous-image').click(function(){
if($(this).attr('id') == 'show-previous-image'){
current_image--;
} else {
current_image++;
}
selector = $('[data-image-id="' + current_image + '"]');
updateGallery(selector);
});
function updateGallery(selector) {
var $sel = selector;
current_image = $sel.data('image-id');
$('#image-gallery-caption').text($sel.data('caption'));
$('#image-gallery-title').text($sel.data('title'));
$('#image-gallery-image').attr('src', $sel.data('image'));
disableButtons(counter, $sel.data('image-id'));
}
if(setIDs == true){
$('[data-image-id]').each(function(){
counter++;
$(this).attr('data-image-id',counter);
});
}
$(setClickAttr).on('click',function(){
updateGallery($(this));
});
}
});
</script>

Here is a solution I'm using for Bootstrap 5.
<!-- a link that triggers modal -->
More details
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Image Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<!-- include image here-->
<img src="images/img_example_8.png" alt="Image Title" class="img-fluid">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
The top-voted solution did not work for me as it uses Bootstrap 3 and my app does not. Basically I just followed the bootstrap 5 modal documentation. I made the modal size large so the image is larger.

css:
img.modal-img {
cursor: pointer;
transition: 0.3s;
}
img.modal-img:hover {
opacity: 0.7;
}
.img-modal {
display: none;
position: fixed;
z-index: 99999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.img-modal img {
margin: auto;
display: block;
width: 80%;
max-width: 700%;
}
.img-modal div {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.img-modal img, .img-modal div {
animation: zoom 0.6s;
}
.img-modal span {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.img-modal img {
width: 100%;
}
}
#keyframes zoom {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
Javascript:
$('img.modal-img').each(function() {
var modal = $('<div class="img-modal"><span>×</span><img /><div></div></div>');
modal.find('img').attr('src', $(this).attr('src'));
if($(this).attr('alt'))
modal.find('div').text($(this).attr('alt'));
$(this).after(modal);
modal = $(this).next();
$(this).click(function(event) {
modal.show(300);
modal.find('span').show(0.3);
});
modal.find('span').click(function(event) {
modal.hide(300);
});
});
$(document).keyup(function(event) {
if(event.which==27)
$('.img-modal>span').click();
});
img.modal-img {
cursor: pointer;
transition: 0.3s;
}
img.modal-img:hover {
opacity: 0.7;
}
.img-modal {
display: none;
position: fixed;
z-index: 99999;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.9);
}
.img-modal img {
margin: auto;
display: block;
width: 80%;
max-width: 700%;
}
.img-modal div {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.img-modal img, .img-modal div {
animation: zoom 0.6s;
}
.img-modal span {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
cursor: pointer;
}
#media only screen and (max-width: 700px) {
.img-modal img {
width: 100%;
}
}
#keyframes zoom {
0% {
transform: scale(0);
}
100% {
transform: scale(1);
}
}
Javascript:
$('img.modal-img').each(function() {
var modal = $('<div class="img-modal"><span>×</span><img /><div></div></div>');
modal.find('img').attr('src', $(this).attr('src'));
if($(this).attr('alt'))
modal.find('div').text($(this).attr('alt'));
$(this).after(modal);
modal = $(this).next();
$(this).click(function(event) {
modal.show(300);
modal.find('span').show(0.3);
});
modal.find('span').click(function(event) {
modal.hide(300);
});
});
$(document).keyup(function(event) {
if(event.which==27)
$('.img-modal>span').click();
});
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<img src="http://www.google.com/favicon.ico" class="modal-img">

If you have an editor, this mean the images are dynamically added by Javascript, so when using jQuery you need to select the image tag starting from an object that is already in page.
My answer will work for both cases: images displayed when page load and images dynamically added after by Javascript.
I am using a class that can be added and will open the image in modal.
The image:
<img src='/assets/image.png' style='width:100px;' class='imageViewBig'/>
The modal:
<div class="modal fade" id="modalImgageView" tabindex="-1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body text-center">
<button type="button" class="btn-close bg-dark" data-bs-dismiss="modal" aria-label="Close" style="position:absolute; top:5px;right:5px;"></button>
<img src="assets/images/nophoto.png" alt="Image Title" class="img-fluid" id="modalImgageViewIMG">
</div>
</div>
</div></div>
the modal header and footer are removed
the "close" button is moved over the image in right corner
image from modal have id "modalImgageViewIMG" and is needed to change the "src" attribute
The jQuery:
$(document).on("click", ".imageViewBig", function() {
let url = $(this).attr('src');
$('#modalImgageViewIMG').attr('src', url);
$('#modalImgageView').modal('toggle');
});
click event is set on $(document)
class "imageViewBig" have a listener for "click" event and will take the "src" from the clicked image and putted to image from modal

The two above it is not run.
The table edit button:
<a data-toggle="modal" type="edit" id="{{$b->id}}" data-id="{{$b->id}}" data-target="#form_edit_masterbank" data-bank_nama="{{ $b->bank_nama }}" data-bank_accnama="{{ $b->bank_accnama }}" data-bank_accnum="{{ $b->bank_accnum }}" data-active="{{ $b->active }}" data-logobank="{{asset('components/images/user/masterbank/')}}/{{$b->images}}" href="#" class="edit edit-masterbank" ><i class="fa fa-edit" ></i></a>
and then in JavaScript:
$('.imagepreview555').attr('src', logobank);
and then in HTML:
<img src="" class="imagepreview555" style="width: 100%;" />
Not it runs.

Close loading overlay with javascript

Following is the Twitter Bootstrap snippet which I am trying to close from javascript after 5 second but I was unable to do that. Kindly let me know how can I close it.
Currently its closing when a user clicks on this button:
<button type="button" class="close" style="float: none;" data-dismiss="modal" aria-hidden="true">×</button>
http://bootsnipp.com/snippets/featured/centered-processing-modal
<!-- Static Modal -->
<div class="modal modal-static fade" id="processing-modal" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="text-center">
<img src="http://www.travislayne.com/images/loading.gif" class="icon" />
<h4>Processing... <button type="button" class="close" style="float: none;" data-dismiss="modal" aria-hidden="true">×</button></h4>
</div>
</div>
</div>
</div>
</div>
.modal-static {
position: fixed;
top: 50% !important;
left: 50% !important;
margin-top: -100px;
margin-left: -100px;
overflow: visible !important;
}
.modal-static,
.modal-static .modal-dialog,
.modal-static .modal-content {
width: 200px;
height: 200px;
}
.modal-static .modal-dialog,
.modal-static .modal-content {
padding: 0 !important;
margin: 0 !important;
}
.modal-static .modal-content .icon {
}

Without wanting to read the docs for you, here's the quick and dirty solution for the one in the link.
setTimeout(
function(){
$('#processing-modal button.close').click();
},
5000
);
If you want more granular control, you'll have to read the docs. This is intended to finish when some data process that it's bound to somehow is finished. That's probably somehow tied to a custom attribute and triggering an event or something.

Develop Reference

JavaScript is the programming language of the Web.

how to change the default positioning of modal in bootstrap? - javascript

Add the following css to your html and try changing the top, right, bottom, left values. .modal { position: absolute; top: 10px; right: 100px; bottom: 0; left: 0; z-index: 10040; overflow: auto; overflow-y: auto; }

I get a better result setting this class: .modal-dialog { position: absolute; top: 50px; right: 100px; bottom: 0; left: 0; z-index: 10040; overflow: auto; overflow-y: auto; } With bootstrap 3.3.7. (all credits to msnfreaky for the idea...)

For Bootstrap 5, just add this to your css. .modal-dialog { top: 7rem !important; } Do not add to .modal otherwise the modal will not be dismissed when tapping on the top of the modal because backdrop is shifted down too.

In the CSS file add following lines: .modal-dialog { transform: translateY(50%)!important; } You can change 50% to any other value, which will solve the problem in your browser.

I know it's a bit late but I had issues with a modal window not allowing some links on the menu bar to work, even when it has not been triggered. But I solved it by doing the following: .modal{ display:none; }

Related

In Safari the center of the 3D Carousel is not right, Edge, Chrome is working fine

Bootstrap side navbar wont collapse on link click

Responsive Bootstrap modal without page scrollbars

In Bootstrap open Enlarge image in modal

Close loading overlay with javascript

Categories

Resources