How to make a simple modal popup for the following code.And on click on the background the modal popup should not disappear.
<html> <input type="textarea"></input> </html>
Here's a plain-JavaScript example:
var modal = document.getElementById('modal'); var shade = document.getElementById('shade'); document.getElementById('start').onclick = function() { modal.style.display = shade.style.display = 'block'; }; document.getElementById('close').onclick = function() { modal.style.display = shade.style.display = 'none'; }; // This code is a workaround for IE6's lack of support for the // position: fixed style. // if (!('maxHeight' in document.body.style)) { function modalsize() { var top = document.documentElement.scrollTop; var winsize = document.documentElement.offsetHeight; var docsize = document.documentElement.scrollHeight; shade.style.height = Math.max(winsize, docsize) + 'px'; modal.style.top = top + Math.floor(winsize / 3) + 'px'; }; modal.style.position = shade.style.position = 'absolute'; window.onscroll = window.onresize = modalsize; modalsize(); }
body { margin: 0; } #shade, #modal { display: none; } #shade { position: fixed; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; } #modal { position: fixed; z-index: 101; top: 33%; left: 25%; width: 50%; } #shade { background: silver; opacity: 0.5; filter: alpha(opacity=50); }
<div id="shade"></div> <div id="modal"> <textarea rows="5" cols="25"></textarea> <button id="close">Close</button> </div> <p> <button id="start">Start</button> </p>
2.1m questions
2.1m answers
60 comments
57.0k users
