html Modal popup

0 votes

How to make a simple modal popup for the following code. And on clicking on the background, the modal popup should not disappear.

<html>
<input type="textarea"></input>
</html>
Aug 3, 2022 in HTML by Ashwini
• 5,430 points
762 views

1 answer to this question.

0 votes

Try this 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>
answered Aug 4, 2022 by Deepak
• 980 points

Related Questions In HTML

0 votes
0 answers

How to make a simple modal pop up form using jquery and html?

I've read the jQuery tutorials, but I'm ...READ MORE

Jul 24, 2022 in HTML by Ashwini
• 5,430 points
489 views
0 votes
1 answer

What is Html Web storage

With web storage, web applications can store ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,880 points
1,517 views
+1 vote
1 answer

How can i create simple register form using html and css?

Html5 contains lots of elements using which ...READ MORE

answered Jan 31, 2020 in HTML by Niroj
• 82,880 points
4,744 views
0 votes
3 answers

HTML - Change\Update page contents without refreshing\reloading the page?

pushState() # The pushState() method let's you update the URL and create ...READ MORE

answered Dec 15, 2020 in HTML by Gitika
• 65,890 points
61,238 views
0 votes
1 answer

How to handle Pop-up in Selenium WebDriver using Java

Actually, its pretty simple. Use this code ...READ MORE

answered Apr 6, 2018 in Selenium by nsv999
• 5,500 points
10,473 views
0 votes
1 answer

Handle Popup in selenium

you can try using this loop: for (String ...READ MORE

answered May 3, 2018 in Selenium by wrecker
• 3,110 points
947 views
0 votes
1 answer

Handling selenium webdriver popups

If you want to handle the most ...READ MORE

answered May 14, 2018 in Selenium by king_kenny
• 3,710 points
912 views
0 votes
1 answer

How blockchain hides it's HTML source?

When you click View Source, you see ...READ MORE

answered Jul 17, 2018 in Blockchain by Shashank
• 10,400 points
1,166 views
0 votes
1 answer

How to add/update an attribute to an HTML element using JavaScript?

You can read here about the behaviour of attributes ...READ MORE

answered Aug 4, 2022 in HTML by Deepak
• 980 points
739 views
0 votes
1 answer

Refresh a page using JavaScript or HTML

window.location.reload(); in JavaScript <meta http-equiv="refresh" content="1"> in HTML ...READ MORE

answered Aug 4, 2022 in HTML by Deepak
• 980 points
561 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP