I have been struggling for the last several days with Modals for a project at work. The trigger is a link (with a glyphicon to let the user know it's a table) and I am trying to use data toggle on the link to open a modal containing a table. I can't figure out why it's not working.
The Trigger:
<a data-toggle="modal" href="#tableA">
<span id="tableA_icon" class="glyph-wrap">
<span class="glyphicon glyphicon-th-list"></span>
</span>Table A
</a>
The Modal:
<div class="modal fade" id="tableA" tabindex="-1" role="dialog" link:aria-labelledby="tableA" 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>
<h3 class="modal-title">Table A</h3>
</div>
<div class="modal-body">
Table code goes here (the table does display properly when using another method)
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Print</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
(Yes, my supervisor wants the modal to be printable (which I know will be another long pain in the neck), but right now I'm just focused on trying to get the darned Modal to open. I think I'm missing CSS on the footer buttons but that shouldn't be preventing the modal from opening, right?)
The CSS:
.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: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #333;
margin: auto;
padding: 0;
border: 1px solid #EEE;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
}
/*Modal Header*/
.modal-header {
padding: 2px 16px;
background-color: #EEE;
color: white;
}
/* 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;
}
/* Modal Body */
.Modal-body {padding: 2px 16px;}
/* Modal Footer */
.Modal-footer {
padding: 2px 16px;
background-color: #EEE;
color: white;
}
/*The Footer Print Button*/
.print-btn{
color: #aaa;
/*float: right;*/
display: inline-block;
font-size: 28px;
font-weight: bold;
}
.print-btn:hover,
.print-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* The Footer Close Button */
.close-btn {
color: #aaa;
/*float: right;*/
display: inline;
font-size: 28px;
font-weight: bold;
}
.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
What am I doing wrong?
Use this for a tag and include all css in header and js in footer It works..!
Your mistake seems to be that you're not including Bootstrap in your code. When you do include it, it appears to work fine:
https://jsfiddle.net/9ugo7cvw/1/
To include it, as per the Bootstrap docs add this to your HTML:
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
I think the mistake you're making is assuming that data-toggle as an attribute actually has a function. This is not the case as data-toggle, as far as I'm aware, is not part of HTML5 and is something that is added by Bootstrap. Without Bootstrap installed, data-toggle="modal" is simply a key-value pair where data-toggle is the key and modal is the value.
In case you're not too familiar with JSFiddle, Bootstrap and its dependencies are imported in the Resources tab on the left side of the page.
Without viewing your JS code there's not really much for me to go off of. But if you just want your modal to display, you should give your span an id attribute or something to identify it. I moved your text "Table A" inside of the span tag instead of outside of it and gave it an id attribute. Then I added JavaScript to open the modal upon clicking the text. This is just one way to get your modal only to display.
JSfiddle: https://jsfiddle.net/5gx62bjw/2/
Another way is that you need to included the correct script tags in order for your modal to function correctly:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js" integrity="sha384-vFJXuSJphROIrBnz7yo7oB41mKfc8JzQZiCq4NCceLEaO4IHwicKwpJf9c9IpFgh" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js" integrity="sha384-alpBpkh1PFOepccYVYDB4do5UnbKysX5WZXm3XxPqe5iKTfUKjNkCk9SaVuEZflJ" crossorigin="anonymous"></script>
https://jsfiddle.net/5gx62bjw/3/
Hopefully this helps you get on the right track
Related
I have extracted following code from an already developed script. I need to change this text according to clicked item.
As an example if someone clicked Home button I need to change this div to some other text like you have clicked "Home" likewise. Simply I need the navigation in same page to different text portions.
This is providing what I need exactly without one function. I could see that following text portion is static for every time.
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
I hope this could be done using jQuery/JavaScript.
Thanks in advance!!
body {
font-family: Arial, Helvetica, sans-serif;
margin: 0;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.subnav {
float: left;
overflow: hidden;
}
.subnav .subnavbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.navbar a:hover,
.subnav:hover .subnavbtn {
background-color: red;
}
.subnav-content {
display: none;
position: absolute;
left: 0;
background-color: red;
width: 100%;
z-index: 1;
}
.subnav-content a {
float: left;
color: white;
text-decoration: none;
}
.subnav-content a:hover {
background-color: #eee;
color: black;
}
.subnav:hover .subnav-content {
display: block;
}
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="navbar">
Home
<div class="subnav">
<button class="subnavbtn">About <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Company
Team
Careers
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Services <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Bring
Deliver
Package
Express
</div>
</div>
<div class="subnav">
<button class="subnavbtn">Partners <i class="fa fa-caret-down"></i></button>
<div class="subnav-content">
Link 1
Link 2
Link 3
Link 4
</div>
</div>
Contact
</div>
<div style="padding:0 16px">
<h3>Subnav/dropdown menu inside a Navigation Bar</h3>
<p>Hover over the "about", "services" or "partners" link to see the sub navigation menu.</p>
</div>
</body>
// This is classes that you need to add for it to work
<p class="paragraph">Hover over the "about", "services" or
"partners" link to see the sub navigation menu.</p>
<a class="home" href="#home">Home</a>
// And this is your javascript code
const home= document.querySelector('.home')
const paragraph=document.querySelector('.paragraph')
home.onclick=function(){
paragraph.innerHTML="You are now in a home page"
}
// Hope it helps!
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 am new to node js and EJS template in it.I have a navbar in my navbar.ejs file with a drop-down toggle button in it.My problem is that the button does not work when clicked.Is this due to the EJS template or my code has gone wrong somewhere.Will script tag work inside ejs template file? Please help me out.
Assume that I have done the routing correctly and included all the files in the app.ejs file.
Thanks in advance :)
navbar.ejs
<nav class="navbar navbar-default navbar-static-top" style="width:100%;overflow:hidden;height:30px;background-color:#595959;font-size:17px;font-family:'Segoe UI',Arial,sans-serif">
<div class="container-fluid">
<ul class="nav navbar-nav" style="margin-left:-20px">
<li class="dropdown">
<button type="" class="dropbtn" onclick="myfunction()" >ALL <i class="fa fa-caret-down"></i> </button>
<div class="dropdown-content" id="myDropdown">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
</div>
</nav>
<script>
/* When the user clicks on the button,
toggle between hiding and showing the dropdown content */
function myfunction() {
document.getElementById("myDropdown").classList.toggle("show");
}
// Close the dropdown if the user clicks outside of it
window.onclick = function (e) {
if (!e.target.matches('.dropbtn')) {
var myDropdown = document.getElementById("myDropdown");
if (myDropdown.classList.contains('show')) {
myDropdown.classList.remove('show');
}
}
}
</script>
style.css
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
cursor: pointer;
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: #595959;
text-decoration: none;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
nav.navbar li.dropdown:hover div.dropdown-content {
display: block;
}
try with importing following before </body> tag
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
The navigation links are not working because currently their hrefs are dead links. Each links needs to have its href equal to the route it points to in the .js file. For example, in a normal situation, the home route always links to the '/' path, so if this is supposed to link to the home route, Link 1, then it becomes Link 1(or Home route) as I think it should. The same would apply for other routes. If link 2 was to link to a certain about route, then it should be Link 2( or about). I hope that makes sense.
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.