I need to create a modal dialog on a webpage using javascript. Normally this would be easy as I could use something like jQueryUI or BlockUI, but the caveat here is that I'm not permitted to use jQuery, and I need to support IE9 quirks mode (ie no html5 doctype). I can't find anything online pertaining to what I need. Would anyone have suggestions? Thanks.
Modal Dialog without jQuery
Asked Answered
There is ModaliseJS, lightning fast, with no dependencies and do only what it is supposed to. –
Linskey
github.com/tomloprod/tomloprodModal –
Chalcopyrite
What about doing overlay with a div centered in the middle?
You can have div which you can hide (using javascript):
<div id="overlay">
<div>
<p>Content you want the user to see goes here.</p>
</div>
</div>
The CSS style for overlay can look like this:
#overlay {
visibility: hidden;
position: absolute;
left: 0px;
top: 0px;
width:100%;
height:100%;
text-align:center;
z-index: 1000;
}
Then you can use JavaScript to switch the visibility of the content in the overaly div:
function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
More for example here: http://raventools.com/blog/create-a-modal-dialog-using-css-and-javascript/
There are two problems with this solution. At first, you must choose a background color. Otherwise, you will get a mess with transparent color. I do not know how to solve the second. Here is an example of your proposed solution. Scroll down, below the window. You see that your "window" spans not longer than the screen height. The mess appears below eventhough background was set to lightgray color. The background does not cover the whole overlapped page. Might be we should replace the body. BTW, this is known as
glass pane method. –
Aquifer Shouldn't it be
position: fixed;? To attach the overlay to the window rather than the document. - jsbin.com/kepahehino/edit?output –
Diao
I created a library called tomloprodModal that does what you need. It's a simple and configurable javascript library to create responsive and minimalist modal windows with no dependencies.
I hope it helps you.
Installation:
Just download and add the tomloprodModel.css and tomloprodModel.js to your website.
You can use bower too: bower install tomloprodModal or using npm: npm install tomloprodModal
Initialization:
Javascript:
TomloprodModal.start({
closeOut: true,
bgColor: "#FFFFFF",
textColor: "#333333"
});
Example of modal window:
<div class="tm-modal tm-effect tm-draggable" id="logInPopUp">
<div class="tm-wrapper">
<div class="tm-title">
<span class="tm-XButton tm-closeButton"></span>
<h3 class="tm-title-text">Lorem Ipsum...</h3>
</div>
<div class="tm-content" >
<div style="text-align:center">
<img width="250" src="http://s3.favim.com/orig/47/animal-cat-cute-kitty-surprise-Favim.com-434324.jpg"/>
</div>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.
</p>
</div>
</div>
</div>
Result:
Or, you can create the modal window without any HTML:
TomloprodModal.create({
bgColor: "#FFFFFF",
textColor: "#333333",
title: "Hi!",
content: "Nothing to say",
closeTimer: 1000
});
Documentation:
https://github.com/tomloprod/tomloprodModal
Demo:
This is great, however when I use this I get this error: TypeError: Cannot read property 'addEventListener' of null @ Object.openModal; however it still works. –
Lemuellemuela
I have a huge amount of HTML... what is happening is there is no .tm-overlay element. I didn't add one; maybe it was something I missed in the documentation. –
Lemuellemuela
I have written some simple JavaScript functions for exactly this purpose, as well as a demo page to show you how to use them. You can view this at http://www.interbit.com/demos/modal.html.
The functions I've written are called MsgBox(), YesNo(), and YesNoCancel(). They do what their names imply.
To use them just make a copy of the JavaScript file at the link above, and include it in your HTML. Please do not just link to the file. Rather, make a copy of it, because I may change it or take it down at any time.
Samples:
MsgBox("This is a message for the user.", "This is the title");
MsgBox("This is a message for the user.", "This is the title", "JSSnippetToCall();");
YesNo("Are you sure you want to do this?", "Please Confirm", "JSSnippetToCallOnYes();", "JSSnippetToCallOnNo();");
YesNoCancel("Are you sure you want to do this?", "Please Confirm", "JSSnippetToCallOnYes();", "JSSnippetToCallOnNo();", "JSSnippetToCallOnCancel();");
I've also included a function called JavaScriptError() that takes a JavaScript Error object and formats it for display to the user, suitable for use in a try/catch block:
try {
<your JavaScript code here>
} catch (e) {
JavaScriptError(e);
}
Here's the full listing of the code, as suggested by one of the commenters. You may include it in all your projects. I have some snarky comments about how I want you to give me credit, but really all I'm asking for is common courtesy. I don't really intend to sue anyone unless you steal the code and claim you wrote it.
/**************************************************************************************************/
/* Copyright 2016. Matthew G. Collins. All rights reserved.
/**************************************************************************************************/
/* The functions below are each self-contained and can be copied into any HTML file by themselves
/* and used. The CSS styling is accomplished by using the STYLE attribute on each HTML tag. There
/* is no need to use external CSS. Of course, once you copy the code you can modify it to suit
/* your needs, including changing the styling. But be careful, especially with the msgBoxDivStyle,
/* because some of it is necessary to achieve the desired effect.
/*
/* You are free to simply copy this JavaScript code into your application, as long as you include
/* the copyright notice in each copy of the code you make. No exceptions. If you don't, and I
/* find out, I'll sue you for enough money to retire on. Because that's just rude and rude
/* people need to be sued to make the world a better place. You are also free to modify the code
/* to suit your needs. But if you do, you still need to give me credit.
/*
/* To see how these functions can be used in practice to give the effect of a modal dialog box
/* see the demonstration page at http://www.interbit.com/demos/modal.html.
/*
/* I recognize that this code could easily have been written more efficiently, and without some of
/* the redundancy. I intentionally wrote it the way I did to make it more easily understandable
/* and modifiable to meet your needs.
/**************************************************************************************************/
/**************************************************************************************************/
/* Function MsgBox
/* Copyright 2016. Matthew G. Collins. All rights reserved.
/* Parameters: Message, WindowTitle, onOK
/* Description: This function displays a modal message box with a single OK button.
/* When the user clicks the OK button the box is removed and the JavaScript provided
/* in the onOK parameter, if any, is called.
/*
/* To see how this function can be used in practice to give the effect of a modal dialog box
/* see the demonstration page at http://www.interbit.com/demos/modal.html.
/**************************************************************************************************/
function MsgBox(msg, title, onOK) {
try {
var msgBoxDivStyle = "background: rgba(127, 127, 127, 0.6);height: 100%;position: absolute;width: 100%;z-index: 9999;";
var msgBoxTitleStyle = "background-color: #00478A;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxErrorTitleStyle = "background-color: red;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxSuccessTitleStyle = "background-color: green;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxWarningTitleStyle = "background-color: orange;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxContentsStyle = "background: rgba(255, 255, 255, 1);background-color: white;border: 1px solid black;box-shadow: 6px 6px 6px #070707;";
msgBoxContentsStyle += "left: 30%;position: absolute;resize: vertical;text-align: center;top: 15%;width: 40%;";
var msgBoxTextStyle = "font-size: 18px;overflow: auto;padding: 20px;text-align: center;";
var msgBoxButtonStyle = "margin: 20px;";
var msgDiv = "";
if (title == null) {
title = "Information";
}
if (onOK == null) {
onOK = "";
}
titleStyle = msgBoxTitleStyle;
if (title == "Error" || title == "JavaScript Error" || title == "Exception") {
titleStyle = msgBoxErrorTitleStyle;
} else if (title == "Success") {
titleStyle = msgBoxSuccessTitleStyle;
} else if (title == "Warning") {
titleStyle = msgBoxWarningTitleStyle;
}
msgDiv += "<div id='msgboxDiv' style='" + msgBoxDivStyle + "'>"; // Covers the entire body to prevent any interaction with controls in the body.
msgDiv += "<div id='msgboxContents' style='" + msgBoxContentsStyle + "'>"; // Contains the messagebox itself
msgDiv += "<div id='msgboxTitle' style='" + titleStyle + "'>" + title + "</div>";
msgDiv += "<div id='msgboxText' style='" + msgBoxTextStyle + "'>" + msg + "</div>"; // Contains the text of the message to be displayed.
msgDiv += "<button id='answerOK' tabindex='1' style='" + msgBoxButtonStyle + "' accesskey='K' onclick='" + onOK + "document.body.removeChild(this.parentElement.parentElement);'>O<u>K</u></button>";
msgDiv += "</div></div>"; // Closes the modalBox and modalDiv tags
document.body.insertAdjacentHTML("afterBegin", msgDiv);
// This next line is necessary so that the new elements can be referred to in the following JavaScript code.
document.body.focus();
// Disable the tab key so that the user can't use it to get to the other controls on the page.
document.getElementById('answerOK').onkeydown = function(e){if(e.keyCode==9){return false;}}
document.getElementById('answerOK').focus();
} catch (e) {
JavaScriptError(e);
}
}
/**************************************************************************************************/
/* Function YesNo
/* Copyright 2016. Matthew G. Collins. All rights reserved.
/* Parameters: Message, WindowTitle, onYes, onNo
/* Description: This function displays a modal message box with two buttons labeled "Yes" and "No".
/* When the user clicks either button the box is removed and the appropriate
/* JavaScript (passed in the onYes and onNo parameters) is executed.
/*
/* To see how this function can be used in practice to give the effect of a modal dialog box
/* see the demonstration page at http://www.interbit.com/demos/modal.html.
/**************************************************************************************************/
function YesNo(msg, title, onYes, onNo) {
try {
var msgBoxDivStyle = "background: rgba(127, 127, 127, 0.6);height: 100%;position: absolute;width: 100%;z-index: 9999;";
var msgBoxTitleStyle = "background-color: #00478A;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxErrorTitleStyle = "background-color: red;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxSuccessTitleStyle = "background-color: green;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxWarningTitleStyle = "background-color: orange;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxContentsStyle = "background: rgba(255, 255, 255, 1);background-color: white;border: 1px solid black;box-shadow: 6px 6px 6px #070707;";
msgBoxContentsStyle += "left: 30%;position: absolute;resize: vertical;text-align: center;top: 15%;width: 40%;";
var msgBoxTextStyle = "font-size: 18px;overflow: auto;padding: 20px;text-align: center;";
var msgBoxButtonStyle = "margin: 20px;";
var msgDiv = "";
if (title == null) {
title = "Confirm";
}
if (onYes == null) {
onYes = "";
}
if (onNo == null) {
onNo = "";
}
msgDiv += "<div id='msgboxDiv' style='" + msgBoxDivStyle + "'>"; // Covers the entire body to prevent any interaction with controls in the body.
msgDiv += "<div id='msgboxContents' style='" + msgBoxContentsStyle + "'>"; // Contains the messagebox itself
msgDiv += "<div id='msgboxTitle' style='" + msgBoxTitleStyle + "'>" + title + "</div>";
msgDiv += "<div id='msgboxText' style='" + msgBoxTextStyle + "'>" + msg + "</div>"; // Contains the text of the message to be displayed.
msgDiv += "<button id='answerYes' tabindex='1' style='" + msgBoxButtonStyle + "' accesskey='Y' onclick='" + onYes + "document.body.removeChild(this.parentElement.parentElement);'><u>Y</u>es</button>";
msgDiv += "<button id='answerNo' tabindex='2' style='" + msgBoxButtonStyle + "' accesskey='N' onclick='" + onNo + "document.body.removeChild(this.parentElement.parentElement);'><u>N</u>o</button>";
msgDiv += "</div></div>"; // Closes the modalBox and modalDiv tags
document.body.insertAdjacentHTML("afterbegin", msgDiv);
// This next line is necessary so that the new elements can be referred to in the following JavaScript code.
document.body.focus();
// Intercept the tab key so that the user can't use it to get to the other controls on the page.
document.getElementById('answerYes').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerNo').focus();return false;}}
document.getElementById('answerNo').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerYes').focus();return false;}}
// Put the user's focus on the Yes button.
document.getElementById('answerYes').focus();
} catch (e) {
JavaScriptError(e);
}
}
/**************************************************************************************************/
/* Function YesNoCancel
/* Copyright 2016. Matthew G. Collins. All rights reserved.
/* Parameters: Message, WindowTitle, Callback
/* Description: This function displays a modal message box with three buttons labeled "Yes", "No",
/* and "Cancel". When the user clicks any of the buttons the box is removed and the
/* appropriate JavaScript (passed in the onYes, onNo, and onCancel parameters)
/* is called, if any.
/*
/* To see how this function can be used in practice to give the effect of a modal dialog box
/* see the demonstration page at http://www.interbit.com/demos/modal.html.
/**************************************************************************************************/
function YesNoCancel(msg, title, onYes, onNo, onCancel) {
try {
var msgBoxDivStyle = "background: rgba(127, 127, 127, 0.6);height: 100%;position: absolute;width: 100%;z-index: 9999;";
var msgBoxTitleStyle = "background-color: #00478A;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxErrorTitleStyle = "background-color: red;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxSuccessTitleStyle = "background-color: green;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxWarningTitleStyle = "background-color: orange;color: white;font-size: 20px;font-weight: bold;left: 0px;padding: 4px;text-align: left;top: 0px;";
var msgBoxContentsStyle = "background: rgba(255, 255, 255, 1);background-color: white;border: 1px solid black;box-shadow: 6px 6px 6px #070707;";
msgBoxContentsStyle += "left: 30%;position: absolute;resize: vertical;text-align: center;top: 15%;width: 40%;";
var msgBoxTextStyle = "font-size: 18px;overflow: auto;padding: 20px;text-align: center;";
var msgBoxButtonStyle = "margin: 20px;";
var msgDiv = "";
if (title == null) {
title = "Confirm";
}
if (onYes == null) {
onYes = "";
}
if (onNo == null) {
onNo = "";
}
if (onCancel == null) {
onCancel = "";
}
msgDiv += "<div id='msgboxDiv' style='" + msgBoxDivStyle + "'>"; // Covers the entire body to prevent any interaction with controls in the body.
msgDiv += "<div id='msgboxContents' style='" + msgBoxContentsStyle + "'>"; // Contains the messagebox itself
msgDiv += "<div id='msgboxTitle' style='" + msgBoxTitleStyle + "'>" + title + "</div>";
msgDiv += "<div id='msgboxText' style='" + msgBoxTextStyle + "'>" + msg + "</div>"; // Contains the text of the message to be displayed.
msgDiv += "<button id='answerYes' tabindex='1' style='" + msgBoxButtonStyle + "' accesskey='Y' onclick='document.body.removeChild(this.parentElement.parentElement);" + onYes + "'><u>Y</u>es</button>";
msgDiv += "<button id='answerNo' tabindex='2' style='" + msgBoxButtonStyle + "' accesskey='N' onclick='document.body.removeChild(this.parentElement.parentElement);" + onNo + "'><u>N</u>o</button>";
msgDiv += "<button id='answerCancel' tabindex='3' style='" + msgBoxButtonStyle + "' accesskey='C' onclick='document.body.removeChild(this.parentElement.parentElement);" + onCancel + "'><u>C</u>ancel</button>";
msgDiv += "</div></div>"; // Closes the modalBox and modalDiv tags
document.body.insertAdjacentHTML("afterbegin", msgDiv);
// This next line is necessary so that the new elements can be referred to in the following JavaScript code.
document.body.focus();
// Intercept the tab key so that the user can't use it to get to the other controls on the page.
document.getElementById('answerYes').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerNo').focus();return false;}}
document.getElementById('answerNo').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerCancel').focus();return false;}}
document.getElementById('answerCancel').onkeydown = function(e){if(e.keyCode==9){document.getElementById('answerYes').focus();return false;}}
// Put the user's focus on the Yes button.
document.getElementById('answerYes').focus();
} catch (e) {
JavaScriptError(e);
}
}
/**************************************************************************************************/
/* Function JavaScriptError
/* Copyright 2016. Matthew G. Collins. All rights reserved.
/* Parameters: JavaScript Error Object
/* Description: This function formats and uses the MsgBox function to display a JavaScript Error.
/*
/* To see how this function can be used in practice to give the effect of a modal dialog box
/* see the demonstration page at http://www.interbit.com/demos/modal.html.
/**************************************************************************************************/
function JavaScriptError(e) {
var msg = "";
try {
msg = e.name + "<br /><br />" + e.message + "<br /><br />" + e.stack;
} catch (e) {
msg = e.message;
}
try {
MsgBox(msg, "JavaScript Error");
} catch (e1) {
alert(msg);
}
}
/**************************************************************************************************/
/* Function jsonError
/* Parameters: JSON object with the following properties: errNumber, errMessage.
/* The JSON object may have additional properties, but it will only use the errNumber
/* and errMessage properties.
/* Description: This function formats and displays a JSON error.
/**************************************************************************************************/
function jsonError(err) {
msg = "Error " + err.errNumber + "<br /><br />";
msg += err.errMessage + "<br /><br />";
MsgBox(msg, "Exception");
}
If you might "take down the file" at any time, then this answer may become obsolete at any time. –
Foresee
good effort but is not able to replace js confirm. It does not suspend activity waiting selection. –
Okra
ModaliseJS, lighter than tomloprodModal and compatible with any CSS.
HTML : (omit modalise.css if you have your own design or using bootstrap)
<!DOCTYPE html>
<html>
<head>
<title>Modal example</title>
<link href="../../dist/modalise.css" rel="stylesheet">
<script src="../../dist/modalise.js" type="text/javascript">
</script>
<script src="app.js" type="text/javascript">
</script>
</head>
<body>
<h1>Example modal 1</h1><button id="openModal">Show the modal</button>
<div class="mdl mdl-fadein" id="exampleModal">
<div class="mdl-content mdl-slidein">
<center>
<div class="mdl-header mdl-band-primary">
<span class="close">X</span>
<h2>Example modal</h2>
</div>
<div class="mdl-body">
<h3>Content modal</h3>
</div>
<div class="mdl-footer mdl-band-primary">
<button class="confirm" onclick="return false">Do
thing</button><button class="cancel" onclick=
"return false">Cancel the thing</button>
</div>
</center>
</div>
</div>
</body>
</html>
Code :
var myModal = {}
window.onload = function(){
// It is one of the button Modalise will attach the Show event.
// Note that you can use Modalise without the events, by omitting the .attach() function.
// Then, you can use show() or hide() to use it manually without overload.
var btnOpen = document.getElementById('openModal');
// Modalise(id, options);
myModal = new Modalise('exampleModal', {
btnsOpen : [btnOpen]
})
.attach()
.on('onShow', console.log)
.on('onConfirm', console.log)
.on('onHide', console.log);
}
Love your solution here, but the GPL license is a turn off for legal reasons in my use-case. If it was MIT, I'd use this one. –
Iguana
That was a while ago, I changed the license to MIT as this makes everything trivial ;) Also, this was 7y ago, there are other options today, often embedded in your framework. –
Linskey
I created a library called Msg that makes it easy to create modal windows. It has a lot of options and events to make your own different kinds of modal windows. Everything can be customized through css. It's also a single file, no need to import css files.
I am NOT a fan of JavaScript, but here is a nice cross-browser Modal Window that uses plain HTML and simpler JavaScript to achieve what you need:
- This code does NOT require JQuery or Bootstrap
- This code works in old and new browsers including Internet Explorer 9
- This code uses plain, old-fashioned JavaScript that works in nearly all browsers!
- This code uses the new HTML5
<dialog>element with nice simple fallback code for older browsers that do not know this element (which in 2021 is quite a long list!)
Simply paste in the HTML and JavaScript blocks below and customize as needed.
HTML (Note: The CSS is added inline so move to your style sheet)
<div id="dialogbox_alt" role="dialog" aria-label="Alternate Dialog">
<dialog id="dialogbox" role="dialog" aria-label="Dialog" style=" display:none; width: 20em; max-width: 50%; padding: 1em; background-color: #fff; border: 2px solid #999; border-radius: .5em; /* center all dialogs */ position: fixed; top: 50%; left: 50%; margin-left: -10em; margin-top: -5em; z-index: 99; /* create background screen */ box-shadow: 0 0 0 9999px rgba(0,0,0,0.6); ">
<form id="formdialog1" action"#" method="dialog" style="position:relative;width:100%;height:100%;padding:0;margin:0;">
<span id="dialogcloser" style="display:inline-block;cursor:pointer;padding:.2em;position:absolute;top:-5px;right:-5px;">X</span>
<div style="padding:1em;">
<p>
<label for="animals1">Choose an Animal:</label>
<select id="animals1" name="animals1" required="required" aria-required="true" role="listbox" aria-label="List of Animals" tabindex="0">
<option value="" selected="selected">- choose an animal -</option>
<option value="elephant">Elephant</option>
<option value="zebra">Zebra</option>
<option value="lion">Lion</option>
</select>
</p>
<p>
<button type="submit" name="dialogconfirm" value="confirm">Confirm</button>
</p>
</div>
</form>
</dialog>
</div>
<button id="dialogopener" type="button">Open A Dialog Box</button>
JAVASCRIPT (has all the cross-browser goodies to support IE9)
<script type="text/javascript">
// ================ CROSS-BROWSER DIALOG BOX SCRIPT ===============
// This window.onload" version works in very old browsers. Do not use 'addEventListener'!
window.onload = function () {
// Make sure these element 'ids' match the open and close button and image in your HTML!
var DIALOG_BOX = 'dialogbox';
var DIALOG_BOX_ALT = 'dialogbox_alt';
var DIALOG_OPENER = 'dialogopener';
var DIALOG_CLOSER = 'dialogcloser';
if (document.getElementById(DIALOG_BOX) && document.getElementById(DIALOG_BOX_ALT)) {
if (document.getElementById(DIALOG_OPENER)) {
if (document.getElementById(DIALOG_CLOSER)) {
var dialogbox = document.getElementById(DIALOG_BOX);
var dialogbox_alt = document.getElementById(DIALOG_BOX_ALT);
var dialogopener = document.getElementById(DIALOG_OPENER);
var dialogcloser = document.getElementById(DIALOG_CLOSER);
// OPEN DIALOG : cross-browser script
if (dialogopener.addEventListener) { // W3C DOM
dialogopener.addEventListener('click', function () {
dialogbox.style.display = "block";
if (typeof dialogbox.showModal === "function") {
dialogbox.showModal();
}
}, false);
} else if (dialogopener.attachEvent) { // IE 5-8 DOM
dialogbox_alt.style.cssText = 'position: absolute ;top: -9999px;left: -9999px;';// hide the box on first page view
dialogopener.attachEvent('onclick', function () {
// WARNING: All older non-HTML5 supporting browser will not parse the 'dialog' element.
// So, we reveal a plain "div" element instead.
// For IE 5-6
dialogbox_alt.style.cssText = 'display:block;overflow:auto;width:300px;height:150px;padding:10px;background-color: #ffffff;border:2px solid #999999;z-index: 99;position:fixed;top:40%;left:40%;';
// For IE 7-8
dialogbox_alt.setAttribute('style','display:block;width:20em;height:auto;max-width: 50%;padding: 1em;background-color: #fff;border: 2px solid #999999;z-index: 99;border-radius: .5em;position: fixed;top: 50%;left: 50%;margin-left: -10em;margin-top: -5em;');
});
} else { // MISC DOM
dialogbox_alt.style.cssText = 'position: absolute ;top: -9999px;left: -9999px;';
dialogopener["onclick"] = function () {
dialogbox_alt.style.cssText = 'display:block;overflow:auto;width:300px;height:150px;padding:10px;background-color: #ffffff;border:2px solid #999999;z-index: 99;position:fixed;top:40%;left:40%;';
};
};
// CLOSE DIALOG : cross-browser script
if (dialogcloser.addEventListener) { // W3C DOM
dialogcloser.addEventListener('click', function () {
dialogbox.style.display = "none";
if (typeof dialogbox.showModal === "function") {
dialogbox.close();
}
}, false);
} else if (dialogcloser.attachEvent) { // IE 5-8 DOM
dialogcloser.attachEvent('onclick', function () {
// WARNING: All older non-HTML5 supporting browser will not parse the 'dialog' element.
// So, we reveal a plain "div" element instead.
dialogbox_alt.style.cssText = 'position: absolute ;top: -9999px;left: -9999px;';
});
} else { // MISC DOM
dialogcloser["onclick"] = function () {
dialogbox_alt.style.cssText = 'position: absolute ;top: -9999px;left: -9999px;';
};
};
} else {
alert('The "dialogcloser" element is not found by a JavaScript function!\n\nMake sure the "dialogcloser" element id value matches\nthe JavaScript "DIALOG_CLOSER" variable value.');
};
} else {
alert('The "dialogopener" element is not found by a JavaScript function!\n\nMake sure the "dialogopener" element id value matches\nthe JavaScript "DIALOG_OPENER" variable value.');
};
} else {
alert('The "dialogbox" element(s) are not found by a JavaScript function!\n\nMake sure the "dialogbox" element id value matches\nthe JavaScript "DIALOG_BOX" variable value.');
};
};
// ================================================================
</script>
Notes on Internet Explorer Browser Support:
- IE 10-11 : Performs normally with background
- IE 9: Performs normally but without a background
- IE 7-8: Performs normally but without a background and no rounded borders
- IE 4-6: Dialog appears inside its parent block, but is fully functional
Using position:fixed
and this fiddle,
I have managed to overcome the limitations of the first answer
getting this demo. you basically need glass div with full screen and fixed position styling and nested scrollable content div.
You could also use document.write and then redirect to close the dialog.
© 2022 - 2024 — McMap. All rights reserved.