I'm trying to animate a modal with a transition. I'm just looking for open it slowly but i don't understand how it works...
The modal have to be open from the center of the screen or from the screen down side.
I found this code from google :
https://codepen.io/designcouch/pen/obvKxm
But it's really too complicated for me. I can't understand how adapt it with my code...
/*Ouvrir le popup stress */
// Get the modal
var hydricstressmodal = document.getElementById('hydricstressmodal');
// Get the button that opens the modal
var stress = document.getElementById("stress");
// Get the <span> element that closes the modal
var hydricstressspan = document.getElementsByClassName("stressclose")[0];
// When the user clicks the button, open the modal
stress.onclick = function() {
hydricstressmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
hydricstressspan.onclick = function() {
hydricstressmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == hydricstressmodal) {
hydricstressmodal.style.display = "none";
}
}
/*Ouvrir le popup vegetal */
// Get the modal
var vegetalmodal = document.getElementById('vegetalmodal');
// Get the button that opens the modal
var vegetal = document.getElementById("vegetal");
// Get the <span> element that closes the modal
var vegetalspan = document.getElementsByClassName("vegetalclose")[0];
// When the user clicks the button, open the modal
vegetal.onclick = function() {
vegetalmodal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
vegetalspan.onclick = function() {
vegetalmodal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == vegetalmodal) {
vegetalmodal.style.display = "none";
}
}
#charset "UTF-8";
/* CSS Document */
body {
margin: 0;
font-size: 28px;
background-color: #00011f;
display: flex;
flex-direction: column;
margin : auto;
}
/*popup hydric stress*/
.hydricstressmodal {
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.7); /* Black w/ opacity */
}
/* stress Modal Content */
.stress-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 70%;
border-radius: 30px;
overflow: scroll;
}
.popstress img{
width: 20%;
}
/* The Close Button */
.stressclose {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.stressclose:hover,
.stressclose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/*popup Vegetal*/
.vegetalmodal {
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.8); /* Black w/ opacity */
scale
}
/* stress Modal Content */
.vegetal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
height: 70%;
border-radius: 30px;
overflow: scroll;
}
.popvegetal img{
width: 40%;
}
/* The Close Button */
.vegetalclose {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.vegetalclose:hover,
.vegetalclose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div id="content">
<h3>Electrophotonique Ingénierie : Nouvelle approche de l'imagerie macroscopique par effet de couronne dans le domaine de la santé et des biotechnologies.</h3>
<div id="file" action="" class = "container">
<input id = "stress" type="image" src="IMAGES/PNG/hydricstress.png" />
<div class = "text">
Stress hydrique
</div>
</div>
<!-- The hydric stress Modal -->
<div id="hydricstressmodal" class="hydricstressmodal">
<div class="stress-content">
<span class="stressclose">×</span>
<div class ="popstress" ><img src="images/png/hydricstress.png"></div>
<p>Some text in the Modal..</p>
</div>
</div>
<div id="file" action="" class = "container">
<input id = "vegetal" type="image" src="IMAGES/PNG/vegetal.png" />
<div class = "text">
Biophotonique appliquée aux végétaux
</div>
</div>
</div>
<!-- The vegetal Modal -->
<div id="vegetalmodal" class="vegetalmodal">
<div class="vegetal-content">
<span class="vegetalclose">×</span>
<div class ="popvegetal" ><img src="images/png/vegetal.png" ></div>
<p>Some text in the Modal..</p>
</div>
</div>
<div id="file" action="" class = "container">
<img src="IMAGES/PNG/pont.png" width="100%" />
<div class = "text">
Etudes des ponts photoniques
</div>
</div>
<script type="text/javascript" src="JS/sticky_navbar.js"></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src="js/index.js"></script>
<script src="js/button.js"></script>
A simple solution with css animations:
$('#open').click(function() {
$('#modalOverlay').show().addClass('modal-open');
});
$('#close').click(function() {
var elem = $('#modalOverlay');
elem.removeClass('modal-open');
setTimeout(function() {
elem.hide();
},200);
});
#modalOverlay {
position: fixed;
top:0;
left:0;
right:0;
bottom:0;
background-color: rgba(0,0,0,0.8);
z-index:9999;
}
#modal {
position:fixed;
width:60%;
top:55%;
left:50%;
padding:15px;
text-align:center;
background-color:#fafafa;
box-sizing:border-box;
opacity:0;
transform: translate(-50%,-50%);
transition:all 150ms ease-in-out;
}
#modalOverlay.modal-open #modal {
opacity:1;
top:50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="open" type="button">View modal</button>
<div id="modalOverlay" style="display:none;">
<div id="modal">
<h1>My modal</h1>
<p>This is a simple modal</p>
<button id="close" type="button">Close</button>
</div>
</div>
If you don't want to spend too much time on this kind of feature you could use a library like https://sweetalert2.github.io/ which is very easy to use and do the job.
You can also use library like bootstrap. For bootstrap modal you can refer below link.
https://getbootstrap.com/docs/4.0/components/modal/
Related
I am currently trying to get a simple modal to work within HTML but am having some trouble. I believe it might be with the <div> placements I have but am not sure. Can someone please take a look a let me know what I am doing wrong here?
Here is the code I am using:
<style type="text/css">
.cdynamic-template h2 {
font-size: 24px;
font-weight: 450;
color: "[theme:neutralPrimary, default:#323130]";
}
.cdynamic-template .cdynamic-items .cdynamic-item {
background: "[theme:bodyBackground, default: #fff]";
border: 1px solid "[theme:neutralLight, default: #edebe9]";
//box-shadow: 0px 0px 6px #bfbebe;
margin-bottom: 15px;
}
.cdynamic-template .cdynamic-items .cdynamic-item h3 {
background: "[theme:accentButtonBackground, default:#0078d4]";
color: "[theme:accentButtonText, default: #fff]";
padding: 5px 5px 7px 10px;
margin: 0px;
background-color: #3a4678;
}
.cdynamic-template .cdynamic-items .cdynamic-item .cdynamic-item-fields {
padding: 10px;
}
.cdynamic-template .cdynamic-items .cdynamic-item .cdynamic-item-fields span {
display: block;
font-size: 14px;
}
.cdynamic-item {
float: left;
width: 325px;
height: 200px;
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
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/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
<div class="cdynamic-template">
<h2>Most Recent Creatives
<br><a href=https://ewscripps.sharepoint.com/sites/LighthouseIdeas/SitePages/Creatives.aspx>See All...</a>
</h2>
<div class="cdynamic-items">
{{#each items}}
<div class="cdynamic-item">
<h3>{{Title.textValue}}</h3>
<div class="cimage">
<img
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAEYklEQVRoge3Y64tUdRzH8ffvzM7e15ldM9JtvIURQRAUhQRlSkYQIT0RFCLE/gfRQBFJicgHEmSXJ0E+CYKCJFPZjTKjjKB6EOSNzRtedkd3ZndmZ87304NzZtzx7Obcthac75OZc85vfr/X53x/h2EGWtWqVrWqVfdyuWoGXXtlS1+ny6ccSjnZIJAyGMQ0ACSRkhJJUB8ijgSoW6IDCcGkk3ISgOWRGwfSyNISaYeuSbqMMeLwLxR8XcxZ30jq5GeTdQW4+fKmVTFPW3FuPbACSAAEMJAEAhBI4enwXIAPX4LxlWNmOjfL59ANSWfw9bW18f6i745cvmuAzIZNryPeA7orLvzXeClcqzxm1MxeW/TTsa9mDZDZsHkd0hEgNs/wKJgj63msHjh57PcSzat0as88xoPo8Yv25owdmHh184Pma6SiK/MLX7qey/Ra/4rh4VxFB8zXI/Xhw/klCjKKZnOJB9TZd8tWlJjlAM6xsr47H1zL+kUmn3ic7GOPMl4sYGZzgQ+OLfZwido2zbyynjtfep8v+izfvR0Xj5M+cpyxAwfpyU7S7rzm4iV8WDVzB2rCV24RQ7h4HIDki+tIfXKQ/Oonw26oafjwOBoAsyX14stjplXbQD+pt3ayYNc2xro6yMtvDl7gUCoSQHIDDeFVGaBUibXPsuzTD5la/VTQjfLc9eGRwFgUDYCSzcZXdGPfLhK7tzPW3UnO/PrxCOHfFwmA6GkIf5cQAIl1z7H80McUnnma8WIRk9WOl8BcbzQAam8EX4UfCLqx9O3dJPfsIN3TRcGsNnywdmc0gNTeGL7KBGElXnieZYc+ItvdjWrBB9eiARrG1+a/XbXjARUiAUBTDeGr3UNhpY8OcX7jFrozWVwt+OA4XZqn/E2MmCJsTX346gIUb4xyce+7aOh7Ep6H56gNH6w/UwBlgQX14qtpQProEFf37qd3PEO7F6uYowY8km5FA8CYpMV14/8lQPmuD5+g3/NwuEbwII1FAkg2WkbUjJ9dnz46xNV9++kdz9LhxWp/YKP4WbaQ6RLO1Y+/I0T5rn97gn4vhodrEh6cuBIJ4PDOSfX/GEFCUwVce5yxw99w/Z0D9GQn6PDabgOagEfCdzoTCWDOP4uV9mZteEl0eY6/t+1EuTw69StJz8PDazpeCK/I2Rm2UOws+HXhkehybRR/OIUQcS9WCWoiHgmTK3eg/EXmF/VnuFrN+GBfijYH8fBjc4VH5CZi6fORAAuHP78A/FgP/o4F5hKPM32x6vTpfCRAQNYOieJ8xSNlnFfcM91cEaD/+JdDiK0YE/MOb7rhYxsfOPPbH9PNM/65m1770kNm3huYW49sJZD4n/CjGH85OBwz74P7z/985U5rVX+vX12zpjfmdy3F/EH53qBzWirZYtBCRD+mhExJnLoQPSGoE9EV4ick5cOHPeNLk05K49xNZ5Y27Dqmy8iNOHTBsItkGFly6ZeJanytalWrWtWqe7f+AVrzIKbgsx9BAAAAAElFTkSuQmCC">
</div>
<div class="cdynamic-item-fields">
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<span class='cms-DetailsRow-cell'><strong>Industry: </strong>{{Industry.textValue}}</span>
<span class='cms-DetailsRow-cell'><strong>Description: </strong>{{Description.textValue}}</span>
<span class='cms-DetailsRow-cell'><strong>Video Type: </strong>{{VideoType.textValue}}</span>
</div>
</div>
{{/each}}
</div>
</div>
<script>
// 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("close")[0];
// When the user clicks on 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";
}
}
</script>
Any help in the right direction will be much appreciated!
Thanks!
You have comment mistake for CSS
CSS uses /* */ (block comments) not //
//box-shadow: 0px 0px 6px #bfbebe;
Checkout this line, replace it with
/*box-shadow: 0px 0px 6px #bfbebe;*/
And everything will work just fine
I'm trying to add a semi-opaque overlay to my page that supports multiple modal popups.
The three popup boxes open OK without the need for Javascript, and, with the help of some Javascript, they close by mouse-clicking outside the popups.
Unfortunately, I can't get my overlay to work, without blocking the 'open-modal' buttons. I've tried wrapping the entire 'overlay' div around all the popup boxes, and I've tried keeping the popups outside of the overlay div.
Is there a way to fix this without blocking access to the buttons, and without messing up the 'external close' feature as facilitated by the Javascript?
Three files are attached: ‘.index.html’, ‘style.css’, and ‘modal-script.js’.
Apologies if my terminology is sometimes ‘homespun’, but I’m just and enthusiast doing the best I can.
My code so far is below in this same document. I would be grateful for any suggestions.
HTML CODE:
~ Main Document
CSS (STYLESHEET):
~ Modal Environment
JAVASCRIPT:
~ External Close of Popup Boxes
// JAVASCRIPT FILE: js/modal-script.js
// Closes multi-modals in an HTML page
// SET VARIABLES:
var boxArray = ['box1','box2','box3'];
// LISTEN FOR WINDOW EVENT
window.addEventListener('mouseup', function(event){
// LOOP...
for(var i = 0; i < boxArray.length; i++) {
var box = document.getElementById(boxArray[i]);
// IF...
if(event.target != box && event.target.parentNode != box){
// THEN...
box.style.display = 'none';
} // END IF/THEN STATEMENT
} // END LOOP
}); // END EVENT
/* STYLESHEET FOR MODAL ENVIRONMENT */
/* Pesets */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a:link, a:visited {
text-decoration: none;
}
p {
margin-top: 0;
}
body {
font-family: 'Halvetica', Arial, sans-serif; /* Default font family */
}
/* MODAL ENVIRONMENT */
.modal { /* Format the 'modal-window', which is the modal environment background containing the 'modal-box(es)' */
background: rgba(0, 0, 0, 0.8);
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 10;
display: none;
}
.modal-content { /* Framework and default settings for popup boxes */
position: absolute;
background: #e2e2e2;
width: 80%;
height: 60%;
top: 50%;
left: 50%;
padding: 20px;
transform: translate(-50%, -50%);
border-radius: 1em;
display: none;
}
.modal:target { /* Where '.modal' is the target, make it visible */
display: block;
}
.modal:target .modal-content { /* Where 'modal-content' inside of 'modal' is the target, make both visible */
display: block;
}
/* MY POPUP BOXES */
#box1 {
}
#box2 {
}
#box3 {
}
/* Formatting: */
.button {
width: 250px;
height: 30px;
}
.type_1-button {
width: 250px;
height: 30px;
font-size: 0.9em;
font-weight: normal;
color: #000;
margin: 20px;
}
.type_1-button:hover {
background: dodgerblue;
font-size: 1em;
font-weight: bold;
color: #fff;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multi-modal</title>
<script src="modal-script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--Button controls to trigger pop-up boxes-->
<button onclick="document.getElementById('box1').style.display = 'block'" class="type_1-button">Open Box 1</button>
<button onclick="document.getElementById('box2').style.display = 'block'" class="type_1-button">Open Box 2</button>
<button onclick="document.getElementById('box3').style.display = 'block'" class="type_1-button">Open Box 3</button>
<!--MODAL CODE-->
<div id="overlay" class="modal"> <!--Create modal window/environment/background-->
<!--PROBLEM HERE... WHAT TO DO???-->
</div> <!--End 'overlay' div and 'modal' class-->
<!--myBoxes: box1-->
<div id="box1" class="modal-content">
<h2>Pop-out Interface - Box1</h2>
</div> <!--End 'box1'-->
<!--myBoxes: box2-->
<div id="box2" class="modal-content">
<h2>Pop-out Interface - Box2</h2>
</div> <!--End 'box2'-->
<!--myBoxes: box3-->
<div id="box3" class="modal-content">
<h2>Pop-out Interface - Box3</h2>
</div> <!--End 'box3'-->
<!--END MODAL CODE-->
</body>
</html>
Add z-index:11 to .modal-content class and remove display:none from .modal class or add display:block to .modal class when clicking button.
If you want to access 3 buttons also when modal popup is appear add z-index: 11; position: relative; in .type_1-button class.
Add z-index:-1; to .modal and change some javascript as below
// JAVASCRIPT FILE: js/modal-script.js
// Closes multi-modals in an HTML page
// SET VARIABLES:
var boxArray = ['box1','box2','box3'];
// LISTEN FOR WINDOW EVENT
window.addEventListener('mouseup', function(event){
// LOOP...
for(var i = 0; i < boxArray.length; i++) {
var box = document.getElementById(boxArray[i]);
// IF...
if(event.target != box && event.target.parentNode != box){
// THEN...
debugger;
box.style.display = 'none';
} // END IF/THEN STATEMENT
} // END LOOP
}); // END EVENT
document.getElementById("overlay").addEventListener("click", function(event){
document.getElementById('overlay').style.display = 'none';
});
/*STYLESHEET FOR MODAL ENVIRONMENT*/
/*Pesets*/
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
a:link, a:visited {
text-decoration: none;
}
p {
margin-top: 0;
}
body {
font-family: 'Halvetica'; Arial, sans-serif; /* Default font family */
}
/*MODAL ENVIRONMENT*/
.modal { /*Format the 'modal-window', which is the modal environment background containing the 'modal-box(es)'*/
background: rgba(0,0,0,.8);
position: absolute;
width: 100%;
height: 100vh;
top: 0;
left: 0;
z-index: 10;
display: none;
}
.modal-content{ /*Framework and default settings for popup boxes*/
position: absolute;
background: #e2e2e2;
width: 80%;
height: 60%;
top: 50%;
left: 50%;
padding: 20px;
transform: translate(-50%,-50%);
border-radius: 1em;
display: none;
}
.modal:target { /* Where '.modal' is the target, make it visible */
display: block;
}
.modal:target .modal-content { /* Where 'modal-content' inside of 'modal' is the target, make both visible */
display: block;
}
/*MY POPUP BOXES*/
#box1 {
}
#box2 {
}
#box3 {
}
// Formatting:
.button {
width: 250px;
height: 30px;
}
.type_1-button {
width: 250px;
height: 30px;
font-size: 0.9em
font-weight: normal;
color: #000;
margin: 20px;
}
.type_1-button:hover {
background: dodgerblue;
font-size: 1em;
font-weight: bold;
color: #fff;
}
.modal{
z-index:-1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Multi-modal</title>
<script src="modal-script.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<!--Button controls to trigger pop-up boxes-->
<button onclick="document.getElementById('box1').style.display = 'block';document.getElementById('overlay').style.display = 'block'"
class="type_1-button">Open Box 1</button>
<button onclick="document.getElementById('box2').style.display = 'block';document.getElementById('overlay').style.display = 'block'"
class="type_1-button">Open Box 2</button>
<button onclick="document.getElementById('box3').style.display = 'block';document.getElementById('overlay').style.display = 'block'"
class="type_1-button">Open Box 3</button>
<!--MODAL CODE-->
<div id="overlay" class="modal"> <!--Create modal window/environment/background-->
<!--PROBLEM HERE... WHAT TO DO???-->
</div> <!--End 'overlay' div and 'modal' class-->
<!--myBoxes: box1-->
<div id="box1" class="modal-content">
<h2>Pop-out Interface - Box1</h2>
</div> <!--End 'box1'-->
<!--myBoxes: box2-->
<div id="box2" class="modal-content">
<h2>Pop-out Interface - Box2</h2>
</div> <!--End 'box2'-->
<!--myBoxes: box3-->
<div id="box3" class="modal-content">
<h2>Pop-out Interface - Box3</h2>
</div> <!--End 'box3'-->
<!--END MODAL CODE-->
</body>
</html>
Thanks for your feedback, people. I wasn't happy with my own solution, so I took it back to the 'drawing board' with all of your valuable comments in mind.
My code now produces a set of three interchangeable modals with two options for closing - press the 'X' symbol or mouse click the background. I will be looking for the third option of closing by [Esc.] key later. Pleas let me know if you have any recommended methods for closing with the escape key.
The overlay window opens and closes at the right moments without interfering with other elements. I hope this make a worthwhile exemplar for anyone looking for modal solutions.
The code is about to follow.
Thank you all,
Adrian McG
// MODAL CODE
// Open and close multiple modal boxes
// Project Title: Muli-modals */
// GET MODAL-OPEN BUTTONS
var modalBtns = document.querySelectorAll(".modal-open"); // Get 'ALL' buttons with the '.modal-open' class
// Make a forLoop to work for 'each' individual modal button...
modalBtns.forEach(function(btn) { // Create a function called "btn" to work in a forLoop for each one that equals 'modalBtns'
btn.onclick = function() { // On mouse-click, activate the 'btn' function and let it do the following...
var modal = btn.getAttribute("data-modal"); // Declare and set a variable called 'modal' to have the same attribute...
//as any element that has the property of 'data-modal' (attached to the modal buttons)
document.getElementById(modal).style.display = "block"; // ...then get the 'modal' document, stored in 'data-modal',
//and set its display style attribute to "block", which will display all elements with the '.modal' class
}; // End function
}); // End forLoop
// CLOSE MODALS: Method 1 - Close by button click
// Get all butons with the '.modal-close' class
var closeBtns = document.querySelectorAll(".modal-close");
closeBtns.forEach(function(btn) { // Create a function called "btn" to work in a forLoop
btn.onclick = function() { // On mouse-click, activate the 'btn' function and let it do the following...
var modal = btn.closest(".modal").style.display = "none"; // ...then get the 'modal' document, and set its display style
// attribute to "none", which will make all elements with the '.modal' class invisible
} // End function
}) // End forLoop and function
// CLOSE MODALS: Method 2 - Close by external click on the overllay window
window.onclick = function(e) { // Creat a function named 'e' (for event) to work on mouse-click event
if(e.target.className === "modal") { // If the target of the mouse-click event is strictly equivalent to the class 'modal'...
e.target.style.display = "none"; // ...then get set the targeted element to 'none'; or, in other words, make the
// modal invisible
} // End if/then statement
} // End function
/* Default CSS */
/* PRESETS */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Halvetica', Arial, sans-serif; /* Default font family */
}
a:link, a:visited { /* Prevents links from automaticilly being underlined, unless otherwide specified */
text-decoration: none;
}
p {
margin-top: 0;
}
body {
margin: 0 auto;
}
/* Main HTML page as starting point */
.container { /* Create a wrapper to center the button objects on screen ...
... This obviously will change according to main page layout */
position: fixed;
width: 500px;
height: 300px;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background: aqua;
padding: 20px 20px 0 20px;
}
/* MODAL ENVIRONMENT */
.modal { /* This is the modal window-overlay that masks out the page we started on */
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.6);
animation: modal-open .5s;
z-index: 200;
display: none;
}
/*MODAL BOXES AND CONTENT*/
.modal-content { /* The modal box that pops up inside the modal window-overlay */
position: relative;
background: #fff;
width: 400px;
height: 300px;
top: 25%;
left: 50%;
transform: translate(-50%,-50%);
border-radius: 15px;
z-index: 400;
display: inline-block;
}
.modal-header {
height: 15%;
width: 100%;
background-color: #284254;
padding: 5px 15px;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
border-style: outset;
border-width: medium;
border-color: #7B919D;
border-bottom-style: outset; /* Strengthen shadow at bottom-border bevelled edge */
border-bottom-width: 4px; /* Strengthen shadow at bottom-border bevelled edge */
border-bottom-color: #1F323F; /* Strengthen shadow at bottom-border bevelled edge */
display: inline-block;
}
.modal-body {
width: 100%;
height: 72.75%;
color: #7b7b7b7;
padding: 15px 0;
background-color: #fff;
background: linear-gradient(#fff, #999); /* Adds gradient to the modal box background,...
from white (top) to light grey (bottom) */
}
.modal-footer {
width: 100%;
height: 12.25%;
font-size: 14px;
padding: 5px 15px;
border: none;
outline: none;
border-radius: 15px;
color: #1a73e8;
background-color: #fff;
background: linear-gradient(#fff, #999); /* Adds gradient to the modal box background,...
from white (top) to light grey (bottom) */
}
/*MODAL CONTROLS*/
.modal-open {
width: 150px;
height: 30px;
font-size: 0.9em;
font-weight: normal;
color: #000;
}
.modal-open:hover {
font-size: 1em;
font-weight: bold;
background: dodgerblue;
color: #fff;
}
.modal-close {
position: relative;
background: #c3c3c3c;
width: 42px;
height: 42px;
top: -60px;
left: 38px;
border-radius: 50%;
color: #5b5b5b;
font-size: 2.5em;
font-weight: bold;
line-height: 0.7;
border: solid aqua 5px;
box-shadow: 2px 4px 10px #2d2d2d;
float: right;
display: inline-block;
}
.modal-close:hover {
background: #5b5b5b;
color: #c3c3c3;
}
/*FONTS AND PARAGRAPH SPACING*/
.modal-header-text {
font-size: 1.15em;
font-weight: bold;
text-align: left;
color: #00FFFF;
margin: 5px 5px 5px 5px;
}
.modal-heading{
height: 40px;
font-size: 1.25em;
font-weight: bold;
color: dodgerblue;
text-align: center;
margin: 6px 5px 0 5px;
}
.modal-paragraph{
font-size: 1em;
color: #000000;
line-height: 1.5em;
text-align: center;
margin: 0px 5px 10px 5px;
}
.modal-footer-text {
font-size: 0.9em;
font-weight: normal;
font-style: italic;
text-align: center;
color: #000000;
margin: 5px 5px 5px 5px;
}
/*Footer Anchor Links - /*Anchor-link behaviour in footer*/
.modal-footer-text a:link {
color: #6900CC;
text-decoration: none;
background-color: transparent;
}
.modal-footer-text a {
color: #6900CC;
}
.modal-footer-text a:visited {
color: #505050;
text-decoration: none;
background-color: transparent;
}
.modal-footer-text a:hover {
color: #0000FF;
text-decoration: underline;
background-color: transparent;
}
.modal-footer-text a:selected {
color: #0000FF;
font-weight: bold;
text-decoration: none;
background-color: transparent;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="dcterms.created" content="Tue, 05 Feb 2019 11:43:55 GMT">
<title>Multi-modals</title>
<!--JAVASCRIPT-->
<!--Microsoft Internet Explorer - Finds free sourcecode to translate old versions-->
<!--[if IE]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--STYLESHEETS-->
<link rel="stylesheet" type="text/css" href="css/modal-style.css" />
<!--END STYLESHEETS-->
</head>
<body>
<div class="container">
<!--BUTTONS TO TRIGGER MODALS-->
<button class="modal-open" data-modal="search">Search</button>
<button class="modal-open" data-modal="login">Log-in/Sign-up!</button>
<button class="modal-open" data-modal="spare">Spare</button>
</div> <!--End 'container' div-->
<!--MODAL CODE-->
<!--Modal 1-->
<div class="modal" id="search"> <!--Overlay window to act as backdrop to the modal box-->
<div class="modal-content"> <!--Format layout and content of modal box-->
<div class="modal-header"> <!--Format the modal box header-->
<h1 class="modal-header-text">Modal: Search eruditeAlpha.com</h1>
<button class="modal-close">×</button> <!--Button to close modal-->
</div><!--End modal header-->
<div class="modal-body"> <!--Format the modal box body content-->
<h2 class="modal-heading">Search Contents</h2>
<p class="modal-paragraph">This modal is not yet fully functional...</p>
</div> <!--End modal body-->
<div class="modal-footer"> <!--Format the modal box footer-->
<p class="modal-footer-text">Follow me at
<a href="http://adrian-mcglinchey.blogspot.com/" target="blank">
"Adrian's Write"</a> blog space...</p>
</div> <!--End modal footer-->
</div> <!--End modal content-->
</div> <!--End 'modal1' overlay/backdrop-->
<!--Modal 2-->
<div class="modal" id="login"> <!--Overlay window to act as backdrop to the modal box-->
<div class="modal-content"> <!--Format layout and content of modal box-->
<div class="modal-header"> <!--Format the modal box header-->
<h1 class="modal-header-text">Modal: Log-in / Sign-up!</h1>
<button class="modal-close">×</button> <!--Button to close modal-->
</div><!--End modal header-->
<div class="modal-body"> <!--Format the modal box body content-->
<h2 class="modal-heading">Members' Area</h2>
<p class="modal-paragraph">This modal is not yet fully functional...</p>
</div> <!--End modal body-->
<div class="modal-footer"> <!--Format the modal box footer-->
<p class="modal-footer-text">Follow me at
<a href="http://adrian-mcglinchey.blogspot.com/" target="blank">
"Adrian's Write"</a> blog space...</p>
</div> <!--End modal footer-->
</div> <!--End 'modal2' content-->
</div> <!--End 'modal2' overlay/backdrop-->
<!--Modal 3-->
<div class="modal" id="spare"> <!--Overlay window to act as backdrop to the modal box-->
<div class="modal-content"> <!--Format layout and content of modal box-->
<div class="modal-header"> <!--Format the modal box header-->
<h1 class="modal-header-text">Modal: Spare</h1>
<button class="modal-close">×</button> <!--Button to close modal-->
</div><!--End modal header-->
<div class="modal-body"> <!--Format the modal box body content-->
<h2 class="modal-heading">Keep in Reserve</h2>
<p class="modal-paragraph"> This modal is not yet fully functional...</p>
</div> <!--End modal body-->
<div class="modal-footer"> <!--Format the modal box footer-->
<p class="modal-footer-text">Follow me at <a href="http://adrian-mcglinchey.blogspot.com/"
target="blank">
"Adrian's Write"</a> blog space...</p>
</div> <!--End modal footer-->
</div> <!--End 'modal2' content-->
</div> <!--End 'modal3' overlay/backdrop-->
<!--JAVASCRIPT CODE FILE-->
<!--External closing of modal popup boxes-->
<script src="js/modal-script.js" type="text/javascript"></script>
</body>
</html>
With that all said, feel free to comment constructively, people, and please don't be too harsh on me if I've made mistakes; I am a web development enthusiast, not a webGuru.
Thanks once again,
Adrian McG
I have a div modal popup that displays fine in Chrome but in IE 11 it fails to render correctly. Interestingly it only fails to render when IE is maximized, if I shrink the window then it renders correctly.
I say it fails rendering because the modal popup does not show up in IE when maximized. However if I start clicking where the modal popup is supposed to be then IE weirdly starts painting it or rendering it.
Here is my html code with javascript/jquery:
<html>
<body>
<input type="button" style="text-align:left;width:100%;height:100%;border:none;" class="light_button" ID="totalPointsID" runat="server" onclick="fnmodalpopup()" />
<div id="dialogModal1" class="modal-background" style="display:none" >
<div class="modal-content" >
<div class="modal-header" >
<span class="modal-close" onclick="fnmodalclose()" >×</span>
<span>REWARDS</span>
</div>
<div class="modal-body">
<p> Some paragraph </p>
<br />
</div>
<div class="modal-footer">
<input ID="buttonClose1" class="light_button" type="button" value="Close" onclick="fnmodalclose()" />
<input ID="buttonContinue1" class="button" style="float:right;" type="button" value="Continue to site" runat="server" />
</div>
</div>
</div>
<script type="text/javascript">
var myModal = document.getElementById('dialogModal1');
// When the user clicks on the button, open the modal
function fnmodalpopup()
{
$('#dialogModal1').css('display', 'block');
return false;
}
// When the user clicks on <span> (x), close the modal
function fnmodalclose()
{
$('#dialogModal1').css('display', 'none')
return false;
}
</script>
</ body >
</ html >
And this is my CSS:
/* The Modal (background) */
.modal-background {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fefefe;
border: 2px solid #888;
width: 50%; /* Could be more or less, depending on screen size */
border-radius: 15px;
}
.modal-header {
background-color: #F8F6F9;
color: #54276f;
font-size: 12px;
padding: 10px;
border-bottom: 1px solid #888;
border-top-left-radius: 15px;
border-top-right-radius: 15px;
}
.modal-body {
padding: 20px;
}
.modal-footer {
padding: 20px;
overflow: hidden;
}
/* The Close Button */
.modal-close {
padding-right: 10px;
color: #aaa;
float: right;
font-size: 25px;
}
.modal-close:hover,
.modal-close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
note: I have tried different combinations of display:inline-block/flex/inline-flex , etc. and I also tried different CSS positions fixed, relative, etc. and I have researched in many other sites and similar questions posted, no luck yet. thank you.
Finally got the right suggestion.
Because my div modal popup is nested within other div blocks and modules, that may have been causing the problem. The solution is moving the div modal popup as the first child element of
With jquery that is very easy to do:
$("body").prepend($('#dialogModal1'));
I have a current modal set-up that uses a jquery script to allow for multiple modals on a single page. Currently, the user selects an image, and that same image pops-up as a modal (event.target). In this instance, I would like users to be able to select a string of text, which pops-up an associated image. I am having difficulty modifying my code to do so. For the sake of clarity, I have placed both instances in a single jsfiddle. Any help would be much appreciated.
https://jsfiddle.net/csapidus/mh3hysrr/12/
The same code that is in the jsfiddle is below:
<title>[BMED] Acrylic Breakdancing Contraption</title>
<link rel="icon" href="https://c1.staticflickr.com/5/4304/35858762401_3288711c9e_o.png">
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace|Raleway:100,500,600,800" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Orbitron" rel="stylesheet">
<!-- <link href="css/bootstrap.min.css" rel="stylesheet"> -->
<style>
* { box-sizing: border-box; }
/* force scrollbar */
html { overflow-y: scroll; }
body { font-family: sans-serif; }
/* ---- grid ---- */
.grid {
background: ;
}
/* clear fix */
.grid:after {
content: '';
display: block;
clear: both;
}
/* ---- .grid-item ---- */
.grid-sizer,
.grid-item {
width: 32.55%;
margin-bottom: 10px;
}
.grid-item {
float: left;
}
.grid-item img {
display: block;
max-width: 100%;
}
/******************** Image Modals ********************/
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 1.0;}
/* 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.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
</style>
<body>
<div class="footerU">
<h1>[BMED] Acrylic Breakdancing Contraption</h1>
</div>
<div class="intro_unlim">
<p> The **** final project required students to develop a contraption with at least three connected moving parts. I elected to model a breakdancer's legs as he prepares for a headspin. Unfortunately, the final product came out looking like more of an upside down crab. The legs are made of thin acrylic, the wood for the base is walnut, and the wood for the body is paduak. </p>
<p> Estimated Building Cost: $35.00</p>
<br>
<p> Clicking this text should open up a modal that presents the first image</p>
<p> Clicking this text should open up a modal that presents the second image</p>
</div>
<div class="full">
<div class="grid">
<div class="grid-sizer"></div>
<div class="grid-item">
<img id="Img1" class = "modal-img" data-index = "1" src="https://c1.staticflickr.com/5/4352/36316868716_a33d16e02e_b.jpg"/>
</div>
<div id="myModal1" class="modal" data-index="1">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption">paduak body of the contraption (cut using a jigsaw, and then sanded) nailed to rectangular walnut base</div>
</div>
<div class="grid-item">
<img id="Img2" class = "modal-img" data-index = "2" src="https://c1.staticflickr.com/3/2945/33377180683_9c7b27232f_b.jpg"/>
</div>
<div id="myModal2" class="modal" data-index="2">
<span class="close">×</span>
<img class="modal-content" id="img02">
<div id="caption">final product: paduak contraption with acrylic legs, a walnut base, and googley eyes</div>
</div>
</div>
</div>
<div class="return">
<div id="button">Return to Homepage</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://unpkg.com/masonry-layout#4.2.0/dist/masonry.pkgd.min.js"></script>
<script>
// JQuery Method for Multiple Modals
$(function() {
$('body').on('click', '.modal-img', function(event) {
var $img = $(event.target);
var index = $img.data('index');
var $modal = $("#myModal" + index);
$modal.find('img').attr('src', $img.attr('src'));
$modal.find('#caption').text($img.attr('alt'));
$modal.css('display', 'block');
});
$('body').on('click', '.modal .close', function(event) {
var $modal = $(event.target).closest('.modal');
$modal.css('display', 'none');
});
});
// JQuery Method for Masonry
var $grid = $('.grid').masonry({
itemSelector: '.grid-item',
percentPosition: true,
columnWidth: '.grid-sizer',
gutter: 10
});
$grid.imagesLoaded().progress( function() {
$grid.masonry('layout');
});
</script>
</html>
`See this jsfiddle link that I have created for you: `
https://jsfiddle.net/beljems/ubvvesrw/
I am using $(this), I hope this will help you :)
What I want to accomplish is auto focus on the modal view. To explain it a bit further. I want it so that when I click on my image on my web page and it opens up the modal view it should automatically focus on the modal allowing me to scroll up and down without me having to click on the image to bring it on focus to be able to scroll up and down using my keyboard.
http://imgur.com/a/hG0CF
http://imgur.com/a/W9Erw
http://imgur.com/a/Ijcn5
Follow up I gave links above to pictures. Hopefully its easier now. Cheers
HTML
<!DOCTYPE html>
<html>
<head>
<title>
Advise Column
</title>
<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" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="Modal.css">
<link href="https://fonts.googleapis.com/css?family=Quattrocento|Risque|Unkempt" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br/>
<div class="container">
<div class="row">
<div class="panel panel-info">
<div class="panel-heading"><h1 id="top-hd-01" class="page-header">PICK A SENSEI!</h1></div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<figure class="col-xs-12 col-sm-12 col-md-4 col-lg-4 img-placement">
<img src="Batman.jpg" alt="BATMAN" class="advise-page-img-sizing adv-page-img-modalling" id="adv-page-img-01">
<figcaption class="img-captioning">BATMAN</figcaption>
</figure>
<figure class="col-xs-12 col-sm-12 col-md-4 col-lg-4 img-placement">
<img src="Robin.jpg" alt="ROBINS" class="advise-page-img-sizing adv-page-img-modalling" id="adv-page-img-02">
<figcaption class="img-captioning">ROBIN</figcaption>
</figure>
<figure class="col-xs-12 col-sm-12 col-md-4 col-lg-4 img-placement">
<img src="Joker.jpg" alt="JOKER" class="advise-page-img-sizing adv-page-img-modalling" id="adv-page-img-03">
<figcaption class="img-captioning">JOKER</figcaption>
</figure>
</div>
</div>
<!-- The Modal -->
<div class="modal" id="myModal">
<!-- The Close Button -->
<span class="close" id="modal-cross-button" onclick="document.getElementById('myModal').style.display='none'">×</span>
<!-- Modal Content (The Image) -->
<img class="modal-content" id="modal-adv-page-img">
<!-- Modal Caption (Image Text) -->
<div id="caption"></div>
</div>
<script src="Modal.js" type="text/javascript"></script>
</body>
</html>
CSS
#top-hd-01
{
font-family: 'Unkempt', cursive;
}
.img-placement
{
display: block;
text-align: center;
/*cursor: pointer;*/
}
.advise-page-img-sizing
{
height: 250px;
width: 350px;
}
.img-captioning
{
font-size: 35px;
font-family: 'Risque', cursive;
text-align: center;
margin-top: 10px;
}
/* Style the Image Used to Trigger the Modal */
.adv-page-img-modalling {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.adv-page-img-modalling:hover {opacity: 0.7;}
/* 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.9); /* Black w/ opacity */
}
/* Modal Content (Image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
padding: 20px;
/*height: 100%;*/
/* max-height: 450px;
max-width: 700px;*/
}
#modal-cross-button
{
position: fixed;
}
.sensei-answers, .sensei-questions, .sensei-quote
{
font-family: 'Quattrocento', serif;
}
.sensei-questions
{
font-size: 28px;
}
.sensei-answers
{
font-size: 22px;
color: darkblue;
}
.sensei-quote
{
font-size: 20px;
text-align: center;
color: #ff751b;
}
/* Caption of Modal Image (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
#keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
JavaScript
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var modalImg = document.getElementById("modal-adv-page-img");
var img1 = document.getElementById("adv-page-img-01")
var img2 = document.getElementById("adv-page-img-02")
var img3 = document.getElementById("adv-page-img-03")
var captionText = document.getElementById("caption");
img1.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
img2.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
img3.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
You could try this:
$("#myModal").on('shown.bs.modal', function () {
$(this).focus();
});
The autofocus attribute won't work in this case, since this will fire on page load. However, you can easily tackle this problem with some JavaScript.
document.getElementById('modal').focus(); // vanilla JS
$('#modal').focus(); // jQuery
Make sure to trigger one of these functions as soon as the modal is openend.