I'm designing a site using bootstrap and mmenu libraries. I'm trying to add a bootstrap modal that opens when clicking a button in mmenu.
The modal doesn't close when clicking close, pressing ESC and clicking outside the modal.
I tried writing a page with the same modal and mmenu, where the modal opens by clicking a button on the page, not in the mmenu, and both worked fine.
I tried a mmenu popup that appears when the button inside the mmenu is clicked, but had the same problem.
I'd be happy with a generic answer as well;
Where problems with these two libraries can arise, and how to get around them. Or how to debug the code so that I can figure out the solution myself. I tried checking the Console in Chrome but there were no errors there. I don't know how to check any further.
I added my code just in case someone who is familiar with the mmenu and bootstrap libraries has a specific answer. Thank you all for your effort.
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="CSS/bootstrap.css" rel="stylesheet" />
<link href="CSS/jquery.mmenu.themes.css" rel="stylesheet" />
<link href="CSS/jquery.mmenu.all.css" rel="stylesheet" />
<link href="CSS/jquery.mmenu.positioning.css" rel="stylesheet" />
<script src="JS/jquery-1.11.3.min.js"></script>
<script src="JS/jquery.mmenu.all.min.js"></script>
<script src="JS/bootstrap.min.js"></script>
</head>
<body>
<!-- Modal -->
<button type ="button">Menu</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<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-default" data-dismiss="modal">Close
</button>
<button type="button" class="btn btn-primary">Save changes
</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<nav id="welcomeMenu" class="col-xs-12 col-sm-5">
<div>
<ul class="vertical">
<li>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
</li>
</ul>
</div>
</nav>
</div>
<script type="text/javascript">
$(document).ready(function () {
$("#welcomeMenu").mmenu({
extensions: ["theme-dark", "border-full", "multiline", "pagedim-white"],
offCanvas: {
position: "right",
zposition: "front"
}
});
});
</script>
</body>
</html>
Here is the fiddle.
instead
Remove z-index:1 in row 69 of this file "CSS/jquery.mmenu.all.css"
set z-index in your main css file to auto
.mm-slideout { z-index:auto;}
Instead of changing something in jquery.mmenu.all.css you could include the following in your own css-files:
body.modal-open .mm-slideout{
z-index:inherit;
}
Remove z-index:1 in row 69 of this file "CSS/jquery.mmenu.all.css"
.mm-slideout{
-webkit-transition:-webkit-transform .4s ease;
transition:-webkit-transform .4s ease;
transition:transform .4s ease;
transition:transform .4s ease,-webkit-transform .4s ease;
z-index:1
}
your codes is fine and modal can launch and close when button close clicked. I've already tested. the problem is in your **bootstrap version**.
I see you use bootstrap.css not min.css. If you feel you have fast speed connection as well as your hosting, there will be no problem. otherwise, use with min.
BTW, I use v3.1.0 (min.js/min.css) and jQuery v2.1.1
Your code is working perfectly, i have tested this.
bellow is the Fiddle to check.
<!-- 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">
<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-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<nav id="welcomeMenu" class="col-xs-12 col-sm-5">
<div>
<ul class="vertical">
<li><span class="glyphicon glyphicon-log-in"></span> Log in</li>
<li><span class="glyphicon glyphicon-user"></span> Continue as guest</li>
</ul>
</div>
</nav>
<div class="row">
<!--a place for tips-->
<div class="col xs-12 hidden-xs col-sm-3 ">
</div>
<!--a place for text-->
<div class="col-xs-12 col-sm-9">
<div class="page-header">
<h1>Welcome.</h1><br />
<small>We are glad to see you here.</small>
</div>
</div>
</div>
</div>
$(document).ready(function () {
$("#welcomeMenu").mmenu({
extensions: ["theme-dark", "border-full", "multiline", "pagedim-white"],
offCanvas: {
position: "right",
zposition: "front"
}
});
});
Here's the work modal: http://jsfiddle.net/okkf2bsr
i had a same problem before .
so what i did.
i add the below code in jquery.
// Call Business logo modal.
$('#myModal_business').modal({
backdrop: 'static',
keyboard: false,
show: false
});
then after on button click through jquery you can close or open the modal.
like this
$(".buttonclass").click( function() {
$('#myModal_business').modal('show');
});
To hide the modal
$('#myModal_business').modal('hide');
Related
This concept is based on the post Multiple modals overlay
I am trying to create a folder modal, and within every folder modal the user should be able 1) open existing
or
2) create a new file modal
Please run the code below to understand how it works. You will have to click buttons and the list items for opening the modals
But this operates in a bootstrap full screen mode instead of dialog
Clicking on the button creates a folder in the list
When you click the "This is folder ###" it opens a modal as shown below
Now I could create a file
The issue is that needs to be fixed is when file item is cliked, the file modal should overlay on top of the folder modal, But now its closing and both modals wont stay.
<!doctype html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous" -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3" crossorigin="anonymous"></script>
</head>
<body>
<button class="btn btn-primary" id="addnewfolder">Create new folder</button>
<ul class="list-group folder"></ul>
<script>
$("#addnewfolder").click(function(event) {
var code = (Math.random() + 1).toString(36).substring(7)
$(".folder").append(`<li class="list-group-item">
<img src="https://img.icons8.com/officel/48/null/live-folder.png" class="float-start" />
<div class="ms-5" data-bs-toggle="modal" href="#modal-toggle-${code}">This is folder ${code}<br />
<div>
<div class="modal fade" id="modal-toggle-${code}" aria-hidden="true" aria-labelledby="modal-toggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-toggleLabel">Inside Folder ${code}</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="list-group file"></ul>
<button data-bs-target="#modal-toggle2" data-bs-toggle="modal" class="btn btn-primary file-${code}">Add File Inside ${code}</button>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>`);
//$(`#modal-toggle-${code}`).modal("show");
$(`.file-${code}`).click(function(event) {
var dcode = Math.floor(Math.random() * 10);
$(".file").append(`<li class="list-group-item">
<img src="https://img.icons8.com/cotton/64/null/happy-file.png" class="float-start" />
<div class="ms-5">This is file inside ${code}-${dcode}<br />
<small class="text-secondary">This is a ${code}-${dcode} item description</small>
<div>
<div class="modal fade" id="modal-toggle-${code}-${dcode}" aria-hidden="true" aria-labelledby="modal-toggleLabel" tabindex="-1">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h1 class="modal-title fs-5" id="modal-toggleLabel">Inside Folder</h1>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
Hello World
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
</li>`);
//$(`#modal-toggle-${code}-${dcode}`).modal("show");
});
});
$(document).on('show.bs.modal', '.modal', function() {
const zIndex = 1040 + 10 * $('.modal:visible').length;
$(this).css('z-index', zIndex);
setTimeout(() => $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack'));
});
</script>
</body>
Don't stack Bootstrap modals.
Bootstrap only supports one modal window at a time. Nested modals
aren’t supported as we believe them to be poor user experiences.
https://getbootstrap.com/docs/5.2/components/modal/#how-it-works
Toggle between multiple modals with some clever placement of the
data-bs-target and data-bs-toggle attributes. Please note multiple
modals cannot be open at the same time—this method simply toggles
between two separate modals.
https://getbootstrap.com/docs/5.2/components/modal/#toggle-between-modals
Therefore toggle the modals instead of stacking them. Better UX and no need for any z-index tricks.
Your issue.
With that out of the way, the reason why the modal is closing when clicking the "Add File" button is because...
<button data-bs-target="#modal-toggle2" data-bs-toggle="modal" class="btn btn-primary file-${code}">Add File Inside ${code}</button>
...you have a data-bs-target & -toggle on your button that creates a new 'file'. This will toggle modal #modal-toggle2, and since it doesn't exists on your page you get the error of an undefined modal.
You also have a few typos, like forgetting to close a <div> in a few places.
Your solution...
Appends the modal to the body, not the <li> element.
Uses the data attributes data-bs-target and data-bs-toggle to toggle the modals.
Features a "Go back to folder" button when accessing the 'file' modal.
$(document).ready(function() {
$("#addnewfolder").click(function() {
var code = (Math.random() + 1).toString(36).substring(7)
$(".folder").append(`
<li class="list-group-item" data-bs-toggle="modal" data-bs-target="#modal-${code}">
<img src="https://img.icons8.com/officel/48/null/live-folder.png" class="float-start" />
<div class="ms-5">This is folder ${code}</div>
</li>
`);
$('body').append(`
<div class="modal fade" id="modal-${code}" tabindex="-1" aria-labelledby="modal-${code}-label" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-${code}-label">Folder ${code}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<button class="btn btn-primary file-${code}">Add new File</button>
<ul class="list-group file"></ul>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
`)
$(`.file-${code}`).click(function() {
var dcode = Math.floor(Math.random() * 10);
$(this).closest('.modal').find('.file').append(`
<li class="list-group-item" data-bs-toggle="modal" data-bs-target="#modal-${code}-${dcode}">
<img src="https://img.icons8.com/cotton/64/null/happy-file.png" class="float-start" />
<div class="ms-5">
This is file inside ${code}-${dcode}
<br>
<small class="text-secondary">This is a ${code}-${dcode} item description</small>
</div>
</li>
`)
$('body').append(`
<div class="modal fade" id="modal-${code}-${dcode}" tabindex="-1" aria-labelledby="modal-${code}-${dcode}-label" aria-hidden="true">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modal-${code}-${dcode}-label">File ${code}-${dcode}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>Hello World</p>
</div>
<div class="modal-footer">
<button class="btn btn-primary">Save</button>
<button type="button" class="btn btn-secondary" data-bs-toggle="modal" data-bs-target="#modal-${code}" >Go back to folder ${code}</button>
</div>
</div>
</div>
</div>
`)
})
})
})
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.3.0-alpha1/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
<button class="btn btn-primary" id="addnewfolder">Create new folder</button>
<ul class="list-group folder"></ul>
If you also want the top-right close button (X) in the 'File' modal to act as going back to the 'folder' modal, simply do:
<button type="button" class="btn-close" data-bs-toggle="modal" data-bs-target="#modal-${code}" aria-label="Close"></button>
Hi im trying to disable outside click in my modal. I've tried using methods like backdrop: 'static', keyboard: false but i cant seem to make it work
html:
<div class="container my-5">
<hr class="my-5">
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria-
labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-
keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center>
</button>
</div>
<div class="modal-body">
<strong>Create an account or Log in to see additional search results...</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
<button type="button" class="btn btn-primary">Log In</button>
</div>
</div>
</div>
</div>
javascript:
$(function() {
$('#basicExampleModal').modal('show');
});
You have couple syntax issues in the code you posted. Ex. extra </button> tag and data- keyboard="false"> has a space in it. Aside from the syntax issues, it should work as expected as you can see from below example. If it still doesn't work on your end, there is something else wrong elsewhere in your code.
$('#basicExampleModal').modal('show');
<html lang="en">
<head>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/css/bootstrap.min.css">
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.14.3/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.1.3/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container my-5">
<hr class="my-5">
<!-- Modal -->
<div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<center>
<h1 class="modal-title" id="exampleModalLabel">Want more?</h1>
</center>
</div>
<div class="modal-body">
<strong>Create an account or Log in to see additional search results...</strong>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button>
<button type="button" class="btn btn-primary">Log In</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Use this:
$(function() {
$('modal_id').modal('show');
$('modal_id').modal({
keyboard: false,
backdrop: 'static'
})
});
This script will now allow close the modal by clicking outside the modal or by pressing the esc key.
I have a modal and I want to ask the user to authenticate before showing the modal (that overrides server files with the modal content).
I want the user to click on my editmodal button, to show a connection form and if it's the same as my json base64 encoded data the modal get shown.
My problem: I can't get my modal to be shown with any of those
$('#Modal').modal();
$('#Modal').modal('toggle');
$('#Modal').modal('show');
my code is :
<button id="buttonmodal" type="button" class="btn btn-primary" data-target="#exampleModal">
(i removed the data-trigger for i want to do it in js)
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content" style=" width: 600px;
height: 600px;">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button id="closebtn" type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="" name="modal-form" style="width: 100%; height:70%" method="post">
<textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
<div class="modal-footer">
<button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
</div>
and my js is pretty simple for now :
$('#buttonmodal').click(function() {
debugger;
var text = $('#data').text();
$('#textarea_modal').val(text);
$('#exampleModal').modal('show');
});
If ever you have tips or other way to do it, it would help a lot.
You are looking for id "Modal", while your component is using a class "modal" with an id "exampleModal". <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
To fix this you might want to change your code to:
$('.modal').modal();
$('.modal').modal('toggle');
$('.modal').modal('show');
or
$('#exampleModal').modal();
$('#exampleModal').modal('toggle');
$('#exampleModal').modal('show');
It all depends on how you would like to be finding your component.
Note: # is used for ids, while . for classes
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 4 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<!-- Button to Open the Modal
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal"> -->
<button type="button" class="btn btn-primary" id="buttonmodal">
Open modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content" style="width: 600px; height: 600px;">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" name="modal-form" style="width: 100%; height:70%" method="post">
<textarea id="textarea_modal" name="textarea_modal" style="min-width: 100%; min-height:100%"></textarea>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button id="buttonSave" type="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script>
$('#buttonmodal').click(function() {
debugger;
var text = $('#data').text();
$('#textarea_modal').val("test 123");
$('#myModal').modal('show');
});
</script>
</body>
</html>
Ok i was dumb, the solution was : my css link where point on bootstrap 4.3 where my script was going on an older version so i had conflict version that wern't shown in the console.
Ty for those who helped
I use bootstrap 3.3.7 in my angular project and the modal is disabled when I open it by clicking "ADD CLASS".
My code is below.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="add-class pointer" data-toggle="modal" data-target="#add-class-modal">
<img alt="+" src="assets/images/add.png" height="16px" width="16px" style="margin-top: -2px"><span class="add-a-class">ADD CLASS</span>
</div>
<!-- Modal -->
<div class="modal fade" id="add-class-modal" 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>
The result looks like this.
"ADD CLASS" button is at the top right corner.
How can I fix it?
Probaby you have some styling which makes that background overlay has larger z-index. Make sure your modal class has correct styling and dont have some additional onces. it should work fine with default bootstrap styling. You can try setting larger z-index to .modal, but the key is to check if you dont have some additional styling applied.
// this is class for dialog itself
.modal {
position: relative;
z-index: 9999
}
If z-index is smaller than 1072 it can be covered by gray background
UPDATE:
Based on bootstrap example modal on bootstrap page, looks like that gray background is created by div with class mocal-backdrop, which by default have such z-index:
.modal-backdrop {
z-index: 1071;
}
The bootstrap popup is not showing up on my website. I have copied the popup code from the official Bootstrap website.
Here is the link to my website Link to webiste
The popup button is located before the footer credits.
Current condition :
Query Bootstrap Modal is not working
Below code is copy pasted from your give url http://home.india-market.online/
It is working properly in separate example
Solution:
You have footer, <footer class="footer-social-icon text-center section_padding_70 clearfix">
Some how there is z-index:-101; and position:fixed; in <footer>
You need to remove model outside from <footer> and apply directly before </body> tag ends.
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalLong">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</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>
I hope it will start working normally.
Old Code from website is :
The reason is that modal content is placed (nested) inside footer element. Move that modal div to body and modal will appear.