We Keep Coding

Two Bootstrap Modals freeze Page

I have the issue, that when I have declared two Bootstrap Modals at the end of my .cshtml-file, opening the first-declared Modal causes a freeze of the whole page.
If I change the order of the two modals, again the first-declared Modal causes the freeze.
Therefore I think it has to do something with the place of declaration.
My general setup is like this (in this order):
First Modal call:
#Ajax.ActionLink("Action1", "Action1_AL", "Controller",
new { id = x },
new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "Preview_first_modal", InsertionMode = InsertionMode.Replace, OnSuccess = "Open_first_modal()" },
new { #class = "btn btn-sm btn-default" })
Second Modal call:
#Ajax.ActionLink("Action2", "Action2_AL", "Controller",
new { id = y },
new AjaxOptions { HttpMethod = "GET", UpdateTargetId = "Preview_second_modal", InsertionMode = InsertionMode.Replace, OnSuccess = "Open_second_modal()" },
new { #class = "btn btn-sm btn-default" })
First Modal setup:
<div class="modal fade" id="my_first_modal" 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">Title</h4>
</div>
<div class="modal-body align-self-center" id="Preview_first_modal">
#*PartialView*#
</div>
</div>
</div>
</div>
Second Modal setup:
<div class="modal fade" id="my_second_modal" 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">Title</h4>
</div>
<div class="modal-body align-self-center" id="Preview_second_modal">
#*PartialView*#
</div>
</div>
</div>
</div>
Javascript:
function Open_first_modal() {
$('#my_first_modal').modal('show');
}
function Open_second_modal() {
$('#my_second_modal').modal('show');
}
css-file:
body {
}
th {
border: solid 1px #ddd !important;
}
td {
border: solid 1px #ddd !important;
}
table.dataTable.no-footer {
border-bottom: 1px solid #ddd;
}
.dataTables_wrapper .dataTables_filter input {
border: solid 1px #ddd;
}
thead > tr > th {
border-bottom-width: 2px !important;
}
body .modal-dialog {
max-width: 100%;
width: auto !important;
display: inline-block;
}
.modal {
z-index: -1;
display: flex !important;
justify-content: center;
align-items: center;
}
.modal-open .modal {
z-index: 1050;
}
In both modals I display a PartialView, which is loaded by the ActionLinks Action1_AL and Action2_AL.
In this setup clicking the button to call the first modal causes a freeze of the page.
Do you know how I can handle this error? Thank you in advance!
Edit: Added the .css-file

I don't know what exactly went wrong, but replacing the modal properties css by
.modal {
text-align: center;
}
#media screen and (min-width: 768px) {
.modal:before {
display: inline-block;
vertical-align: middle;
content: " ";
height: 100%;
}
}
.modal-dialog {
display: inline-block;
text-align: left;
max-width: 100%;
width: auto !important;
vertical-align: middle;
}
solved the problem.

How to close modal when user clicks anywhere outside of the modal when there are multiple modal at the same page

I am using modal example from W3 Schools
for the two buttons at the same page and each of them opens different modal.
Problem is that function that controls close of modal when user clicks outside of it working only for one modal but not for the second one.
I tried a lot of options, but seems that non of them are working.
I tried to add OR statement for if condition, but without any results :
window.onclick = function(event) {
if ((event.target == modal) || (event.target == modall)) {
modal.style.display = "none";
}
}
also I tried to write separate function to every modal:
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
window.onclick = function(event) {
if (event.target == modall) {
modall.style.display = "none";
}
}
May you know where I am missing the point?
Many thanks for all help, looking forward.

It could be straightforward, but it works in my case.
// Get the modal
var modal1 = document.getElementById("myModal1");
var modal2 = document.getElementById("myModal2");
// Get the button that opens the modal
var btn1 = document.getElementById("myBtn1");
var btn2 = document.getElementById("myBtn2");
// Get the <span> element that closes the modal
var span1 = document.getElementsByClassName("close")[0];
var span2 = document.getElementsByClassName("close second")[0];
// When the user clicks the button, open the modal
btn1.onclick = function() {
modal1.style.display = "block";
}
btn2.onclick = function() {
modal2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span1.onclick = function() {
modal1.style.display = "none";
}
span2.onclick = function() {
modal2.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal1) {
modal1.style.display = "none";
}
if (event.target == modal2) {
modal2.style.display = "none";
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
<button id="myBtn1" class="btn" type="button">Modal 1</button>
<button id="myBtn2" class="btn" type="button">Modal 2</button>
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<div class="modal-header">
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
</div>
<!-- The Modal -->
<div id="myModal2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close second">×</span>
<div class="modal-header">
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
</div>

Node.contains can fulfill your goal, here is an excerpt from MDN
The Node.contains() method returns a Boolean value indicating whether
a node is a descendant of a given node or not.
Syntax node.contains( otherNode )
I've enclosed an example to demonstrate how it works in practice
// Get the modal
var modal1 = document.getElementById('modal-1');
var modal2 = document.getElementById('modal-2');
// Get the button that opens the modal
var btn1 = document.getElementById("modal-1-button");
var btn2 = document.getElementById("modal-2-button");
// When the user clicks the button, open the modal
btn1.onclick = function(event) {
event.preventDefault();
event.stopPropagation();
modal1.style.display = "block";
}
btn2.onclick = function(event) {
event.preventDefault();
event.stopPropagation();
modal2.style.display = "block";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
var modal1 = document.getElementById("modal-1");
var modal2 = document.getElementById("modal-2");
if (modal1.style.display === "block") {
var modal1Content = modal1.querySelector(".modal-content");
if (!modal1Content.contains(event.target)) {
modal1.style.display = "none";
}
}
if (modal2.style.display === "block") {
var modal2Content = modal1.querySelector(".modal-content");
if (!modal2Content.contains(event.target)) {
modal2.style.display = "none";
}
}
};
#modal-1 {
background-color: green;
}
#modal-2 {
background-color: yellow;
}
<html>
<head>
<style>
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="modal-1-button">Modal - 1</button>
<button id="modal-2-button">Modal - 2</button>
<!-- The Modal -->
<div id="modal-1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<div id="modal-2" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>

How to display popup model at the bottom of page?

I have a popup modal which shows after 10 seconds. But it is shown at the top of page and I want that it should be shown at the bottom of page above footer.
How can I do this?
Here is my code :
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close2")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #2098d1;
color: white;
}
.modal-body {
padding: 2px 16px;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal {
position: absolute;
top: 200px;
right: 50px;
bottom: 0;
left: 0;
z-index: 1040;
overflow: auto;
overflow-y: auto;
}
<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 rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="modal fade" id="popup" 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">Special Offer</h4>
</div>
<div class="modal-body">
<h1 style="color:green">10% OFFER </h1>
</div>
</div>
</div>
</div>

Not sure if you need so much code. But this can be made this way:
JavaScript:
$(function () {
setTimeout(function () {
$("#popup").modal();
}, 2000);
});
CSS:
#popup {
top: auto;
bottom: 10px;
outline: none;
}
Preview
Bootply: http://www.bootply.com/DmyamsX6qg
* Click on the link and use the full screen view to check out the functionality.

Play video on webpage like a pop up after clicking image

I need to play a video when the play button is clicked. But I need this video to play on the same page with the background faded out. The video needs to be displayed like a pop up video. I'm having problems getting the video to come up as a pop up when the image is clicked. I need it to be something like this when I click the watch a video. How can I go about doing this?
<div class="col-md-12 f-play-video">
<img class="play-button" src="http://www.clipartbest.com/cliparts/bcy/Egx/bcyEgxxzi.png">
</div>
.f-play-video{
text-align: center;
margin-top: 80px;
}
.play-button{
width:50px;
}
https://jsfiddle.net/4dd4ze53/3/

I guess The Modal Box will solve your problem. Just insert your video code into the box.
<head>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="myBtn">Click here for video!</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p align="center">INSERT YOUR VIDEO HERE!</p>
</div>
</div>
<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

Following #ilmk, #A.Lau and #coskikoz, I managed to get the pop up working using bootstrap modal. This is my working code.
<div class="col-md-12 f-play-video" data-toggle="modal" data-target="#myModal">
<img src="images/play-video.svg">
</div>
<div id="myModal" class="modal fade" 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">Video</h4>
</div>
<div class="modal-body">
<iframe width="100%" height="360" src="<iframe width="560" height="315" src="https://www.youtube.com/embed/7pvci1hwAx8?rel=0&controls=0" "frameborder="0" allowfullscreen autoplay></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

The example you have uses an onclick function to create a model at the end of the document and an overlay element at the top of the body, then appends the text in the model and replaces the video link.
onclick="return playYoutube("Achieve more everyday in your work and your daily life", this.href);"

How do I make the background of a modal clickable?

I want to create a chatbox that can be plugged into website. I have been using Bootstrap Modal to achieve this.
I want my modal to not close when user clicks outside the modal. But the website background should still be clickable/selectable, so that user can still perform operations on the website.
This is the code that I have written so far.
$(window).load(function () {
$('#myModal').modal({ backdrop: 'static', keyboard: false});
$('#myModal').modal('show');
});
function myFunction() {
$('#myModal').modal('toggle');
window.alert('Hello');
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
pointer-events:none;
}
.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;
pointer-events: all;
float: left;
max-width: 250px;
background-color: #ffffff;
}
.textarea-nonresizable {
height: 10em;
border-radius: 1em;
outline: none; /* removes the default outline */
resize: none; /* prevents the user-resizing, adjust to taste */
}
.header-cl {
background-color: #262626;
color: #FFFFFF;
border-bottom-width: 0px;
}
.header-f {
font-size: 14px;
font-weight: bold;
}
.body-cl {
background-color: #c7c8c9;
}
.foot-cl {
border-top-width: 0px;
padding-top: 0px;
background-color: #c7c8c9;
color: #FFFFFF;
}
.btn-ft {
background-color: #3f1603;
color: #FFFFFF;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
color: #FFFFFF;
background-color: #3f1603;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="modal fade " id="myModal" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center modal-sm">
<div class="modal-content">
<div class="modal-header header-cl">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="glyphicon glyphicon-minus-sign"></span>
</button>
<h4 class="modal-title header-f">Contact Us</h4>
</div>
<div class="modal-body body-cl">
<textarea class="form-control textarea-nonresizable" id="comment" placeholder="Type your message here"></textarea>
</div>
<div class="modal-footer foot-cl">
<div style="float:left;color:#FFFFFF;font-size: 11px;line-height: 34px;">
Powered by <strong>Stackoverflow</strong> </div>
<button type="button" class="btn btn-primary btn-ft" onclick="myFunction()">Start Text</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

You could use pointer-events: none; on .modal and .modal-backdrop. Or hide .modal-backdrop with display: none;
.modal {
pointer-events: none;
}
.modal-backdrop {
display: none;
}
EXAMPLE
To be honest, if you are going to modify the functionality of the bootstrap modal this much, you may as well just use a custom element with fixed position rather than trying to fight the Bootstrap CSS.