We Keep Coding

Using <a href..> tag as a bootstrap4 modal trigger for a svg map

I've been trying to implement bootstrap4 modal to my project and I want to use bootstrap4 modal on svg map. Basically I want to show modal when i click to a specific area on svg map. So far I read that I can use -a- tag and pass the class parameters within it but I wouldn't be able to accomplish anything. How can i do this? Thank you.
here is html
<a data-mdb-target="#exampleModal" onclick="return false" data-mdb-toggle="modal" >
<g id="ege" class="region" data-bolgeadi="Ege Bölgesi">
<path>
.
.
</g>
</a>
---Modal---
<div class="modal top fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" data-mdb-backdrop="true" data-mdb-keyboard="true">
<div class="modal-dialog modal-xl ">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-mdb-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-mdb-dismiss="modal">
Close
</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
and JS code that I implemented from the sources I've read so far...
$('a[href$="#exampleModal"]').on( "click", function() {
$('#exampleModal').modal('show');
});

Try this:
HTML:
<svg>
<!--Your SVG code here-->
</svg>
<div id="clickbox-1"></div>
CSS:
#clickbox-1{
position: absolute;
top: /*y pos*/;
left: /*x pos*/;
width: 100px; /*You can change the sizes*/
height: 100px;
/*OPTIONAL clip-path: path(some path data here)*/
}
You can attach your click-events to the clickboxes and position the clickboxes over the regions you want.

Bootstrap Two Side by Side Modals

I have a modal that shows various information, triggering a single modal works perfect. However, when I try to apply Bootstraps' grid logic to place 2 side-by-side modals, I'm failing. This is the code of a single modal:
<div class="modal fade bd-example-modal-lg" tabindex="-1" id="my_modal" role="dialog"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Raw Data</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body modal-body-right">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
FWIW I'm loading the modal via JS using:
$('.modal-body').load("/path/to/modal.html", function () {
$('#my_modal').modal({
show: true
})
});
How can I place those two modals side by side? Thanks!

Use CSS to position the .modal-content...
#modal1 .modal-content {
margin-left: -50%;
}
#modal2 .modal-content {
margin-left: 50%;
}
Demo: https://www.codeply.com/go/V4Eda15hEJ

How vertically center a popup modal inside a long popup modal

I've got a long full screen popup modal(parent-modal). Inside this modal(parent-modal) there is another popup modal(child-modal).
If I scroll the "parent-modal" and then open "child-modal", the "child-modal" modal is not vertically centered.

hope this might be useful to you!
.modal {
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<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">Modal title</h4>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal1">Save changes</button>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<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">Modal title</h4>
</div>
<div class="modal-body">...</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>
</div>

Try this style with child modal:
#parent-modal{
position:relative;
}
#child-modal{
position:absolute;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}

How to vertically center modal?

I want to vertically center a modal. I searched a lot on Google but found nothing helpful. Here is my code:
function inactive(id, ths) {
$("#confirmation").modal("show");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade bs-example-modal-sm" id="confirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" 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">Are you sure you want to inactivate it?</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="yes">Yes</button>
</div>
</div>
</div>
</div>
How can I center it vertically?

Not tested but you can try this
.yourElement{
position: relative;
top: 50%;
transform: translateY(-50%);
}

There is a specific bootstrap class (v4.1) for this:
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Source: https://getbootstrap.com/docs/4.1/components/modal/#vertically-centered

As it looks as a bootstrap modal, Checkout this Fiddle (jsFiddle).
Try
.modal-dialog {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) !important;
}
Hope this helps!

By adding position and transform properties, you wouldn't get it to be centred across all widths and devices, plus calculating it all the time could be a tedious process. Here is what worked by styling just the '.modal-dialog' class
/* Center a bootstrap modal Vertically and horizontally */
.modal-dialog {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
/* and Viola! */

Try this:-
// Vertical centered modals
// you can give custom class like this // var modalVerticalCenterClass = ".modal.modal-vcenter";
var modalVerticalCenterClass = ".modal";
function centerModals($element) {
var $modals;
if ($element.length) {
$modals = $element;
} else {
$modals = $(modalVerticalCenterClass + ':visible');
}
$modals.each( function(i) {
var $clone = $(this).clone().css('display', 'block').appendTo('body');
var top = Math.round(($clone.height() - $clone.find('.modal-content').height()) / 2);
top = top > 0 ? top : 0;
$clone.remove();
$(this).find('.modal-content').css("margin-top", top);
});
}
$(modalVerticalCenterClass).on('show.bs.modal', function(e) {
centerModals($(this));
});
$(window).on('resize', centerModals);
/* scroll fixes */
.modal-open .modal {
padding-left: 0px !important;
padding-right: 0px !important;
overflow-y: scroll;
}
/* centering styles for jsbin */
html,
body {
width:100%;
height:100%;
}
html {
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
body > .btn {
display: block;
margin: 0 auto;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 vertically centered modal and scroll fixes</title>
<meta name="description" content="Bootstrap 3 vertically centered modal and scroll fixes">
<!-- include bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- include bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
</body>
</html>

Easiest (not tested cross-browser but should be ok):
HTML:
<div class="container">
<p>Container</p>
<div class="modal">
<p>Modal</p>
</div>
</div>
CSS:
.container {
position:relative;
}
.modal {
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
margin:auto;
}
Here's the fiddle:
http://jsfiddle.net/o9pbgnz5/
It's important that you set both top:0 and bottom:0. Then, margin-top:auto and margin-bottom:auto should take care of the vertical centering. In this example, the shorthand 'margin:auto' centers it both horizontally and vertically.
P.S. Also works with position:fixed;

Centering the modal vertically can be done if you use CSS calc() function on the top CSS property. Let's say that the modal has a height of 600px. Using the vh unit with a value of 50 will get you the midpoint on the vertical height of the screen. Then you just need to subtract half of the height of the modal element.
#modal {
position: fixed;
height: 600px;
top: calc(50vh - 300px);
z-index: 100;
}

if you are using bootstrap 4 or above you can simply use bootstrap classes modal-dialog modal-dialog-centered
function inactive(id, ths) {
$("#confirmation").modal("show");
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal-dialog modal-dialog-centered fade bs-example-modal-sm" id="confirmation" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel">
<div class="modal-dialog modal-sm" 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">Are you sure you want to inactivate it?</h4>
</div>
<div class="modal-body">
<div class="form-group">
<input type="text" class="form-control" name="captcha" id="cval" placeholder="enter captcha">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
<button type="button" class="btn btn-primary" id="yes">Yes</button>
</div>
</div>
</div>
</div>

Bootstrap Modal not popping up

I'm really new to bootstrap and I am trying to add a popup using Modals. I added the code and the scripts, but when you click on the button its not popping up. I can tell something is coming up because the background fades a little but a popup is not coming up. So I need a little bit of help figuring out why its not popping up.
My JavaScript links:
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="js/bootstrap.min.js" type="text/javascript"></script>
Code for Modals:
<div class="modal hide fade" id="myModal">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

This is a compatibility issue v2.X vs v3.X
Bootstrap 3.0 New Classes & Elements
Modal markup has changed .modal-header .modal-body .modal-footer now get wrapped in .modal-content and .modal-dialog
Modal Migration
How to convert from a 2.x to 3.0 modal:
remove .hide from the .modal (it's now hidden by default)
wrap .modal-header .modal-body .modal-footer inside .modal-content
wrap .modal-content inside .modal-dialog
Events are namespaced. For example to handle the modal 'show' event, use 'show.bs.modal'.
Reference
Bootstrap 3 modal example:
<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a>
<div class="modal fade" id="myModal">
<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">
Content for the dialog / modal goes here.
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>
JSFiddle

What I usually do for modals with just JavaScript and Bootstrap is to have an onClick event on the button that executes a JavaScript method that displays the modal.
In your HTML:
<button onclick="myFunction()">Click me</button>
<script>
function myFunction(){
$('#myModal').modal('show')
}
</script>
Just change the function name myFunction to the name you want and myModal to the id of your modal.
Here is the bootstrap docs, where the modal stuff is located, for future reference getbootstrap.com/javascript/

Complete Example using CDN. SO that you can download the latest version from Url
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">
<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/JavaScript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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" 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-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>