We Keep Coding

bootstrap modal not displaying correctly when clicking <a> tag

I am clicking on an <a> tag to open a modal that must display at the center vertically. When i click on the tag, nothing displays. The entire div is rendered but modal doesnt display in the center with backdrop.
In header.blade.php
<div>
<a class="header-text" href="#" data-toggle="modal" data-target="#changeCity">Change City</a>
#include('city-modal')
</div>
In city-modal.blade.php
<div class="modal fade" id="changeCity" tabindex="-1" role="dialog" aria-labelledby="changecitytitle" >
<div class="modal-header">
<div layout="row">
<a href="#">
<img class="app-header__logo" src="{{ assetPath('images/innocity-logo.png') }}">
</a>
<h5 class="modal-title" id="changecitytitle">Choose Your City</h5>
</div>
</div>
<div class="modal-body">
<div layout="row">
<div layout="column">
<a href="#">
<img class="app-header__logo" src="{{ assetPath('images/ahmedabad-city.png') }}">
</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Ahmedabad</button>
</div>
<div layout="column">
<a href="#">
<img class="app-header__logo" src="{{ assetPath('images/jaipur-city.png') }}">
</a>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Jaipur</button>
</div>
</div>
</div>
</div>

You're not using the correct markup for the modal. It should be:
<div class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Modal title</h5>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
Notice the use of modal-dialog and modal-content.
https://getbootstrap.com/docs/4.0/components/modal/#vertically-centered

Bootstrap Modal Footer Not Displaying Correctly

I'm using a Bootstrap Modal and the modal-footer div is displayed with the grey background used to block out the main page instead of the white background used by the rest of the modal.
It's a somewhat complicated set up but I'll do my best to explain it.
The modal definition looks like this:
<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<div class="modal-dialog" role="document">
<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 id="concert-modal-title" class="modal-title"></h4>
</div>
<div id="concert-modal-body" class="modal-body">
</div>
</div>
<div class="modal-footer">
<span id="ConcertMessage" class="pull-left"></span>
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
<button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
</div>
</div>
You'll see that the modal-body section is empty. That's because I have javascript that uses the Mustache.js templating system to set the html of the body using a template and the return from an Ajax call. That all works correctly and the modal body is displayed correctly.
The modal body consist of a Bootstrap tab control and a form that contains all the tab panes, so the overall structure looks like this.
<ul class="nav nav-tabs nav-justified nav-justify">
<li class="active">Basic </li>
<li>Media </li>
<li>Tickets </li>
</ul>
<form id="concert-form" action="#" class="form-horizontal">
<div class="hidden">
<input type="text" name="Mode" id="Mode">
<input type="text" name="ConcertID" value="{{ConcertID}}">
</div>
<div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
<div class="tab-content" style="margin-top:20px;">
... form-group divs with labels and input controls...
</div>
</form>
I've used an html syntax checker to make sure I don't have any unclosed tags. I've also tried placing the form tag in several different places in the code but no matter what I do, the modal-footer section does not display correctly.
Any ideas?

You have your footer outside the modal-content div.
Structure should go:
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
<div class="modal-footer"></div>
</div>
</div>
</div>
You have it as this (your missing a div in the html you posted btw):
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header"></div>
<div class="modal-body"></div>
</div>
<div class="modal-footer"></div>
</div>
</div> <!--missing div in the example you posted here-->
Functioning code below so you can see the correct structure in action:
$(document).ready(function(){
$('#concert-modal').modal('show');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.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"/>
<div class="modal fade" role="dialog" tabindex="-1" id="concert-modal">
<div class="modal-dialog" role="document">
<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 id="concert-modal-title" class="modal-title">Mark it Pete</h4>
</div>
<div id="concert-modal-body" class="modal-body">
<img src="https://s-media-cache-ak0.pinimg.com/originals/ec/f3/fe/ecf3fedfa44312bb0fe6bcb953c8718f.gif" style="max-height: 50px;"/>
</div>
<div class="modal-footer">
<span id="ConcertMessage" class="pull-left"></span>
<button class="btn btn-default" type="button" data-dismiss="modal">Cancel </button>
<button class="btn btn-primary" type="submit" form="concert-modal-form">Save </button>
</div>
</div>
</div>
</div>

How to prevent modal appearing on page load while using backdrop:'static'

I have a dialog box which should appear whenever I click on a checkbox. But it should not disappear when clicking outside or pressing escape. so I used backdrop='static' , keyboard='false' in my jquery.
but then this dialog box is appearing whenever I load or refresh the page.
$('#storeStatusDialog').modal({
backdrop: 'static',
keyboard: false
})
<div class="container">
<div class="modal fade" id="storeStatusDialog" role="dialog" >
<div class="modal-dialog armanlast">
<div class="modal-content">
<div class="modal-header">
<div class="close-icon-wrap">
<a class="modal-close-icon" href="#" data-dismiss="modal">×</a>
</div>
</div>
<div class="modal-body">
<h1 class="modal-title1">Deactivate Store</h1>
<p class="deactivate-p"></p>
</div>
<div class="modal-footer">
<button type="button" id="noDeactivate" data-dismiss="modal" class="btn btn-default cancel-confirm1 btn-approval1" onclick="statusOnAgain()">Cancel</button>
<button type="button" id="yesDeactivate" class="btn btn-default confirm-complete1 btn-approval1"><span style="horizontal-align:middle">Yes</span></button>
</div>
</div>
</div>
</div>
</div>
Please tell me a way to prevent dialog box appearing when page gets loaded.
thank you so much.

HTML:
<div class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#storeStatusDialog">
Launch
</button>
<div class="modal fade" id="storeStatusDialog" role="dialog">
<div class="modal-dialog armanlast">
<div class="modal-content">
<div class="modal-header">
<div class="close-icon-wrap">
<a class="modal-close-icon" href="#" data-dismiss="modal">×</a>
</div>
</div>
<div class="modal-body">
<h1 class="modal-title1">Deactivate Store</h1>
<p class="deactivate-p"></p>
</div>
<div class="modal-footer">
<button type="button" id="noDeactivate" data-dismiss="modal" class="btn btn-default cancel-confirm1 btn-approval1" onclick="statusOnAgain()">Cancel</button>
<button type="button" id="yesDeactivate" class="btn btn-default confirm-complete1 btn-approval1"><span style="horizontal-align:middle">Yes</span>
</button>
</div>
</div>
</div>
</div>
</div>
Js:
$('#storeStatusDialog').modal({
show: false,
backdrop: 'static',
keyboard: false
})
Snippet:
http://codepen.io/anon/pen/dpEjxK

Bootstrap Modal don't open in photo grid

I have a photo shuffle grid, with this grid I can select a few theme's and it shows only the pictures of that theme.
Now I want to do the following, when I click on a image I want a modal to open. The problem I have is the following:
The first image (with a modal in the back) opens without problems, but the other pictures (with modals) do not open probably, I see them (half) but I can't click on them.
This is my code:
HTML
<ul class="portfolio-sorting list-inline text-center">
<li>All</li>
<li>Heren</li>
<li>Dames</li>
<li>jongens</li>
<li>meisjes</li>
<li>gemengd</li>
</ul>
<!--end portfolio sorting -->
<ul class="portfolio-items list-unstyled" id="grid">
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
<figure class="portfolio-item">
<button type="button" class="btn button_test" value="Heren1" data-toggle="modal" data-target="#heren1"> <img src="img/test.jpg" alt="Item 1" class="img-responsive">
<h2 class="teams">heren 1</h2>
</button>
<div class="modal fade bs-example-modal-lg" id="heren1" role="dialog" style="display: none;">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title black_tekst">Heren 1</h4>
</div>
<div class="modal-body">
<!--Tekst -->
<h2 class="black_tekst">Test </h2>
<p class="black_tekst">
<br>
<br> Team informatie
<br>
<br>
</p>
<h3 class="black_tekst">Test</h3>
<!--Einde tekst -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</figure>
</li>
<!--------------------------------------------------------------------------->
<li class="col-md-4 col-sm-4 col-xs-6" data-groups='["heren"]'>
<figure class="portfolio-item">
<button type="button" class="btn button_test" value="Heren2" data-toggle="modal" data-target="#heren2"> <img src="img/test.jpg" alt="Item 1" class="img-responsive">
<h2 class="teams">heren 2</h2>
</button>
<div class="modal fade" id="heren2" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<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="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</figure>
</li>
<!--------------------------------------------------------------------------------->
<!-- sizer -->
<li class="col-md-4 col-sm-4 col-xs-6 shuffle_sizer"></li>
</ul>
<!--end portfolio grid -->
CSS and JS you can find on https://jsfiddle.net/hrpj3j9t/2/

1) Bad code provided on jsfiddle - unclear, modernizr in js code section
2)From my point of view the best way is to generate code you need with jquery. In imageSrc I mean the real path to image.
This the small example of concept:
Place modal at the top:
<body>
<div class="modal" id="modal">
<img id="modalImage" src = "" alt="image">
...
</div>
...
<div class="elementOfGrid" data-image="imageSrc">
</body>
in js:
$('elementOfGrid').click(function(){
$('#modal #modalImage').attr({"src":$(this).data("image")});
$('#modal').modal("show");
}
another variant instead of setting attribute you can generate the whole html and use it like this:
$('#modal').html('');
var htmlRow = '<div class="modalImage"><img src="imageSrc"></div>';
$('#modal').html(htmlRow);

Bootstrap modals don't close

I need to close 2 modals in the same time. Why?
I have 2 modals, first shows the information and the second shows a exclude confirmation. When i close the second i want to close all modals.
This is in ASP.NET MVC and RAZOR.
This JS dont work, can you help me? Thanks!!
$(function () {
$(".close-modal-edit").click(function () {
$('.modal').modal('hide');
});
});
<!-- FIRST MODAL -->
<div class="portfolio-modal modal fade" id="dialog" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body text-left">
<a class="btn btn-success pull-right" data-dismiss="modal"> Close </a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- CONFIRMATION MODAL -->
<div class="portfolio-modal modal fade" id="dialog-exclude" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content modal-content-edit">
<div class="close-modal close-modal-edit" data-dismiss="modal">
</div>
<div class="container">
<div class="row">
<div class="col-lg-4 col-lg-offset-4">
<div class="modal-body text-left">
<a class="btn btn-success pull-right close-modal-edit" data-dismiss="modal"><i class="fa fa-times"></i> Cancel </a>
</div>
</div>
</div>
</div>
</div>
</div>

this seems to work for me. Looping through the modal objects and closing them individually.
$(".close-modal-edit").click(function () {
$.each($(".modal"), function (i, obj) {
$(obj).modal('hide');
});
});
Note: looks like your original $('.modal')modal('hide'); works for me as well here's a fiddle, use it this as a base, see if it works in your project, and if not we'll need more info about your project. http://jsfiddle.net/hxo5kccs/

Can you remove data-dismiss="modal" from both modal and try?