https://github.com/mleidel/jsmodal
modal pop-up boxes for Javascript alert, confirm, and prompt
https://github.com/mleidel/jsmodal
javascript javascript-library modal-dialogs webapp
Last synced: 11 months ago
JSON representation
modal pop-up boxes for Javascript alert, confirm, and prompt
- Host: GitHub
- URL: https://github.com/mleidel/jsmodal
- Owner: MLeidel
- Created: 2019-12-17T20:53:33.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-21T00:07:34.000Z (about 6 years ago)
- Last Synced: 2025-04-06T17:52:09.223Z (about 1 year ago)
- Topics: javascript, javascript-library, modal-dialogs, webapp
- Language: HTML
- Size: 15.6 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JSmodal
modal pop-up boxes for Javascript alert, confirm, and prompt
### JSmodal.js
A modal message box, form or dialog box must be processed
before you can continue working with the rest of the
application. Examples in Javascript are the
```alert, confirm, and prompt``` statements.
These commands are very useful but do not permit additional styling.
JSmodal is a small Javascript library and css that
work with the DOM to make modal dialogs
flexible and attractive.
To use JSmodal it is important to understand that, unlike the Javascript
```alert, confirm, prompt``` commands, JSmodal functions are NON-BLOCKING.
That means execution of the code does NOT stop when the box is displayed.
Because of this JSmodal usually cannot be a simple replacement of the
Javascript methods.
First JSmodal.js and JSmodal.css must be brought into your web page:
```javascript
```
* __JSmodal.open(_mode, content_)__
This opens the modal object over the page dimming the underlying page content.
A close "X" is always present in the upper right corner of the box. Clicking
"X" will close the modal object.
If ___mode___ is set to 1 then any click outside of the box will close
the modal object.
If ___mode___ is set to 0 then only the "X" will
close the modal object.
* __JSmodal.close()__
Call this to programatically close the modal object.
* __JSmodal.confirm(_commands, content_)__
This opens a modal 'confirm' box.
The _commands_ are the Javascript to be executed when the
user clicks the 'confirm' button.
* __JSmodal.prompt(_commands, content_)__
This open a modal box with an input field and and 'OK' button.
The _commands_ are the Javascript to be executed when the
user clicks the 'OK' button.
The ID of the input text field is "JSid".
### __JSmodal.css__
Using this style sheet presents a box without any animation.
Using _JSmodalani.css_ is the same but WITH animation.
### Demo page for JSmodal
```html
JSmodal All Example
a:hover {
cursor: pointer;
background: lightyellow;
}
Modal Boxes: open
Open Example A
Open Example B
Open Example C
function myMsg() {
JSmodal.open(0,"Phasellus scelerisque sodales condimentum.");
// JSmodal does not wait for user action like the javascript 'alert' statement.
document.getElementById('H').innerHTML = "JSmodal is NON-BLOCKING !";
}
Modal Boxes: confirm
JSmodal.confirm Example
// User is a user supplied routine to process confirmed response
function thisConfirm() {
JSmodal.close(); // must call to close the modal box
// actions to be performed on confirmation
alert("Confirmed");
}
Modal 'prompt' Example
JSmodal.prompt Example
function myPrompt() {
JSmodal.prompt(`
JSmodal.close();
let val = document.getElementById('JSid').value;
alert('prompted input: ' + val);`,
"Please enter your email");
// immediately falls through to do this ...
document.getElementById('I').innerHTML = "Remember JSmodal is Non-blocking!";
}
```
-----
__JSmodal.js__
```javascript
const JSmodal = {
closer : 0, // modal close style: 0=X only|1=Outside Box Or X
// the value for close is set in JSmodal.open function
// on document ready
init : function() {
document.getElementsByTagName("body")[0].innerHTML += `
`;
window.onclick = function(event) {
if (event.target == document.getElementById('JSmodal')) {
if (JSmodal.closer === 1) {
document.getElementById('JSmodal').style.display = "none";
}
}
};
},
// call this with text to display in 'msg'
open : function(mode, msg) {
if (arguments.length < 2) {
alert("Missing mode arg in JSmodal.open(mode, msg)");
return;
}
JSmodal.closer = mode;
document.querySelector(".JSmodal-content p").innerHTML = msg;
document.getElementById('JSmodal').style.display = "block";
},
// When the user clicks on (x), close the modal
close : function() {
document.getElementById('JSmodal').style.display = "none";
},
// confirm uses open always with a 0 open mode
confirm : function(routine, msg) {
msg += `
Confirm
`;
JSmodal.open(0, msg);
},
// prompt uses open always with a 0 open mode
prompt : function(routine, msg) {
msg += `
OK
`;
JSmodal.open(0, msg);
}
};
document.addEventListener("DOMContentLoaded", function(event) {
JSmodal.init();
});
```
-----
__JSmodal.css__
```css
.JSmodal {
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 */
.JSmodal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 60%;
border-radius: 5px;
}
/* The Close Button */
.JSclose {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.JSclose:hover,
.JSclose:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
```