We Keep Coding

Opening modal from function in pure javascript

I want to open a modal with a function in pure javascript (not jquery).
Component from where i am calling function:
<div class="col-sm-5 offset-sm-5"
style={{ bottom: "60px", marginBottom: "20px", marginTop: "23px" }}>
<button class="btn btn-primary btn-sm" onClick={this.handleSubmit.bind(this)}>Save</button>
</div>
Function code:
handleSubmit=()=>{
document.getElementById('exchangehouse').style.display = "block"
}
Modal code:
<div class="modal fade" id="exchangehouse" 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>
Thanks

Are you searching for this?
// 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 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";
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Your Contents</p>
</div>
</div>

Here is a modern, pure ES6 implementation of a modal window.
I also included some simple open/close hooks.
class ModalWindow {
constructor(options) {
this.opts = Object.assign({}, ModalWindow._defaultOptions, options)
this.modal = document.querySelector(this.opts.selector)
this.initialize()
this.addEventHandlers()
this.afterRender()
}
initialize() {
if (this.opts.headerText) {
this.query('.md-dialog-header-text').textContent = this.opts.headerText
}
if (this.opts.htmlContent) {
this.query('.md-dialog-content').innerHTML = this.opts.htmlContent
} else if (this.opts.textContent) {
this.query('.md-dialog-content').textContent = this.opts.textContent
}
if (this.opts.theme) {
this.modal.classList.add(`md-theme-${this.opts.theme}`)
}
}
addEventHandlers() {
this.query('.md-dialog-header-close-btn').addEventListener('click', (e) => {
this.setVisible(false)
})
if (this.opts.mode !== 'modal') {
this.modal.addEventListener('click', (e) => {
if (e.target === this.modal) {
this.setVisible(false)
}
})
}
}
afterRender() {
if (this.opts.show === true) {
this.setVisible(true);
}
}
setVisible(visible) {
this.modal.classList.toggle('md-dialog-visible', visible)
if (visible) {
this.onOpen() // class method override or callback (below)
if (typeof this.opts.onOpen === 'function') {
this.opts.onOpen(this.modal)
}
} else {
this.onClose() // class method override or callback (below)
if (typeof this.opts.onClose === 'function') {
this.opts.onClose(this.modal)
}
}
}
query(childSelector) {
return this.modal.querySelector(childSelector)
}
// Example hooks
onOpen() { }
onClose() { }
}
ModalWindow._defaultOptions = {
selector: '.md-dialog',
show: false,
mode: 'modal'
}
class MyCustomModalWindow extends ModalWindow {
constructor(options) {
super(options)
}
onOpen() {
console.log('Opened!') // or you can use options.onOpen
}
onClose() {
console.log('Closed!') // or you can use options.onClose
}
}
let modal = new MyCustomModalWindow({
show: true, // Show the modal on creation
mode: null, // Disable modal mode, allow click outside to close
headerText: 'Hello World!',
htmlContent: '<p>This is an example of the popup.</p>',
theme : 'dark',
onClose : (self) => {
console.log('Another close hook...')
}
})
document.querySelector('#show-modal-btn').addEventListener('click', (e) => {
modal.setVisible(true)
})
.md-dialog {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.md-dialog.md-dialog-visible {
display: block;
}
.md-dialog .md-dialog-window {
border: 1px solid #888;
background-color: #fefefe;
width: 80%;
margin: 10% auto;
}
.md-dialog .md-dialog-header {
position: relative;
width: calc(100% - 0.5em);
height: 1.667em;
font-weight: bold;
font-size: 1.33em;
line-height: 1.667em;
padding: 0.125em 0.25em;
background-color: #DDD;
}
.md-dialog .md-dialog-header-close-btn {
position: absolute;
font-weight: bold;
top: 0;
right: 0;
width: 0.875em;
height: 0.875em;
line-height: 1em;
padding: 0.1em;
color: #7F7F7F;
}
.md-dialog .md-dialog-header-close-btn:before {
content: '\2715';
}
.md-dialog .md-dialog-header-close-btn:hover,
.md-dialog .md-dialog-header-close-btn:focus {
color: #FFF;
text-decoration: none;
cursor: pointer;
background: #F00;
}
.md-dialog .md-dialog-content {
width: 100%;
padding: 0.25em;
}
/** Example Dark Theme */
.md-theme-dark.md-dialog {
background-color: rgba(0, 0, 0, 0.8);
}
.md-theme-dark.md-dialog .md-dialog-window {
border: 1px solid #666;
background-color: #111;
color: #EEE;
}
.md-theme-dark.md-dialog .md-dialog-header {
background-color: #000;
}
.md-theme-dark.md-dialog .md-dialog-header-close-btn {}
.md-theme-dark.md-dialog .md-dialog-header-close-btn:hover,
.md-theme-dark.md-dialog .md-dialog-header-close-btn:focus {}
.md-theme-dark.md-dialog .md-dialog-content {}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<button id="show-modal-btn">Open Modal</button>
<div id="myModal" class="md-dialog">
<div class="md-dialog-window">
<div class="md-dialog-header">
<div class="md-dialog-header-close-btn"></div>
<div class="md-dialog-header-text">$header</div>
</div>
<div class="md-dialog-content">$content</div>
</div>
</div>

In Bootstrap 5 (Beta 1) this gets as simple as this:
Your button (having onClick function call):
<button type="button" class="btn btn-primary" onclick='openModal()'>
Launch demo modal</button>
Your Modal:
<div class="modal fade" id="myModal" tabindex="-1"
aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="Close"></button>
</div>
<div class="modal-body">...</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And finally, the "pure" java script function:
<script type="text/javascript">
function openModal() {
var myModal = new bootstrap.Modal(document.getElementById('myModal'), { keyboard: false });
myModal.show();
}
</script>

well usually the option of modal for visibility is managed in state as boolean type.
you have to change the value of visibility as true(which is open) or false(and close), if there is no function that make visibility as false then you can't close the modal.
which mean is you need to use 'function' to change the 'value of visibility' that where in 'state' to control the modal view.
in react way.
view =( open modal )==> action === ( visibility) ==> state ===( change the value)===> view
and also your question is very abstractive.
anyway i hope that my answer can help you.

onclick event don't work on WEB page

I want to create a modal box. It should appear, when a user clicks a button, and close, when the user clicks a close button in the modal box.
I made two functions:
check() : it change css. After it's elememt onclick, appears modal box
close() : this function should close modal box, but it doesm't. It simply should set previous css setting. This function isn't execution at all when I click a close button(span element).
Why close function doesn't work and what I should modernize to get a result?
Thanks in advance)
function check() {
var modal = document.getElementById("myModal");
modal.style.display = "block";
}
//this function dont't work
function close(){
var modal = document.getElementById("myModal");
modal.style.display = "none";
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
<html>
<body>
<button id="button" type="submit" onclick="check()">Login</button>
<div id="myModal" class="modal">
<div class="modal-content" >
<span class="close" onclick="close()">×</span>
<p >Some text in the Modal..</p>
</div>
</div>
</body>
</html>

close is already the name of a native browser function, window.close(). Rename your function and it works fine:
function check() {
var modal = document.getElementById("myModal");
modal.style.display = "block";
}
function closeModal(){
var modal = document.getElementById("myModal");
modal.style.display = "none";
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
<html>
<body>
<button id="button" type="submit" onclick="check()">Login</button>
<div id="myModal" class="modal">
<div class="modal-content" >
<span class="close" onclick="closeModal()">×</span>
<p >Some text in the Modal..</p>
</div>
</div>
</body>
</html>

Image as a href to modal

I have a problem with JS. I mean when user click on the image, modal opens, I must use a href. I don't know how to make that working. I have only modal. I show you my code:
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<article class="item">
<img src="http://i.imgur.com/RRUe0Mo.png" id="myBtn" alt="" />
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>TEST</p>
</div>
</div>
</article>
Thank you for all your help!

I'm having a hard time to understand what you want to accomplish, but I guess you look for something like this:
<img src="images/film/min_1.png" id="myBtn" alt="" />

I don't know if this is what you're looking for, but I got it working by setting the href to '#' (see jsFiddle demo)
<img src="images/film/min_1.png" id="myBtn" alt="" />

btn.onclick = function() {
modal.style.display = "none";
}
On image click you are showing modal, change it to none, and you can navigate to your given url in href

I know that the question was posted years ago but I struggled to find proper answer for a while. Actually, you can make this:
<a href="#" data-toggle="modal" data-target="your-modal-id" class="image fit">
<img src="" id="" alt="" />
</a>
Hope someone will find it helpful)

How to display popup model at the bottom of page?

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

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

Not able to print pop up dialog box

I need to print a popup dialog box. I have tried several times, but I could only get the whole window with popup dialog box, but need to print only the dialog box.
I did find one solution that could print the dialog box, but now it is not showing the values entered in the text box while printing.
Please help me with the code below or give good references to print div values with values inside the text box.
This is the code that I have written to print the pop up dialog.
<script>
function PrintContent()
{
var DocumentContainer = document.getElementById('scorecard');
var WindowObject = window.open("", "PrintWindow",
"width=750,height=650,top=50,left=50,toolbars=no,scrollbars=yes,status=no,resizable=yes");
WindowObject.document.writeln('<!DOCTYPE html>');
WindowObject.document.writeln('<html><head><title></title>');
var str = "<style type='text/css' media='all'>";
str = str + "MyStyles { text-align: center; }";
str = str + "</style>";
WindowObject.document.writeln(str);
WindowObject.document.writeln('</head><body>');
WindowObject.document.writeln(DocumentContainer.innerHTML);
WindowObject.document.writeln('</body></html>');
WindowObject.document.close();
WindowObject.focus();
WindowObject.print();
WindowObject.close();
}
</script>

Popup modal
HTML
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">x</span>
<p>Some text in the Modal..</p>
</div>
</div>
CSS
/* 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;
}
JS
// 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";
}
}

You can use bootstrap modal box if that is what you are looking for. Here is the code, just paste it in your html file and see if it that's what you want.
<html>
<head>
<!-- Bootstrap Core CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" style="color:#333;">Buy Membership</h4>
</div>
<div class="modal-body">
<p style="color:#777;">You are not a premium member of Pagpry and thus you could use only limited images and features. Buy membership for more features and tools.</p>
<button type="button" class="btn btn-default"> Click Here to Know about Membership Plans.</button>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
alert('works');
$('#myModal').modal();
alert('works');
});
</script>
</body>
</html>