Skip to main content

Modal without JavaScript


A modal is a dialog box or popup window that is displayed on top of the current page, this modal only used HTML & CSS only without JavaScript.

DEMO
HTML
<div id="wrapper">
  <p><a class="button" href="#popup">Pop Me!</a></p>
</div>

<div id="popup" class="overlayModal">
  <a class="cancel" href="#"></a>
	<div class="popup">
		<h2>Modal Title</h2>
		<a class="close" href="#">&times;</a>
		<div class="content">
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
	</div>
</div>
CSS
#wrapper {
  background-clip: padding-box;
  text-align: center;
}

#wrapper .button {
  padding: 5px 10px;
  background-color: Crimson;
  border-radius: 4px;
  color: white;
  text-decoration: none;
}
#wrapper .button:hover {
  background-color: Coral;
}

.overlayModal {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.5);
  transition: opacity 200ms;
  visibility: hidden;
  opacity: 0;
}
.overlayModal .cancel {
  position: absolute;
  width: 100%;
  height: 100%;
  cursor: default;
}
.overlayModal:target {
  visibility: visible;
  opacity: 1;
}

.overlayModal .popup {
  margin: 75px auto;
  padding: 20px;
  background: #fff;
  border: 1px solid #666;
  width: 300px;
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  position: relative;
}
.overlayModal .popup h2 {
  margin-top: 0;
}
.overlayModal .popup .close {
  position: absolute;
  width: 20px;
  height: 20px;
  top: 20px;
  right: 20px;
  opacity: 0.8;
  transition: all 200ms;
  font-size: 24px;
  font-weight: bold;
  text-decoration: none;
  color: #666;
}
.overlayModal .popup .close:hover {
  opacity: 1;
}
.overlayModal .popup .content {
  max-height: 400px;
  overflow: auto;
}
.overlayModal .popup p {
  margin: 0 0 1em;
}
.overlayModal .popup p:last-child {
  margin: 0;
}
Labels:

Comments

Post a Comment

Popular posts from this blog

Create Vertical Text - CSS

From the old internet, the direction of text is pretty much fixed on left-to-right. In modern CSS has addressed the issue and supports vertical text with ease. Right to Left Vertical Text Right to Left Vertical Text HTML <div class= "v-rl" > <p> Right to Left </p> <p> Vertical Text </p> </div> CSS .v-rl { writing - mode : vertical - rl; } Left to Right Vertical Text Left to Right Vertical Text HTML <div class= "v-lr" > <p> Left to Right </p> <p> Vertical Text </p> </div> CSS .v-lr { writing - mode : vertical - lr; } All Characters Upright All Characters Upright Ultraman ウルトラマン HTML <div class= "t-upright" > <p> All Characters </p> <p> Upright </p> <p> Ultraman ウルトラマン </p> </div> CSS .t-upright { writing - mode : vertical - rl; text - orie...
Post a Comment
Read more

Introduction

Hello world,  UIUX Component  is for those who newbie in HTML, CSS and JavaScript for their new career as Web Designer, Web Developer, Web Editor etc. We try our best to make sure we update the code which applicable for your daily routine in web development or maybe some for Apps content.  To utilise this site you should have basic knowledge on HTML, CSS and JavaScript. If you still not sure what we talking about, we have a few suggestion on where you should to start your knowledge. What is HTML HTML stands for Hyper Text Markup Language, the standard markup language for creating Web pages. Describes the structure of a Web page, consists of a series of elements which elements tell the browser how to display the content also elements label pieces of content such as "this is a heading", "this is a paragraph", "this is a link", etc. HTML Tutorial What is CSS CSS stands for Cascading Style Sheets, describes how HTML elements are to be displayed on screen, pape...
Post a Comment
Read more

Element Center and Middle - CSS

Make the element center and middle within the specific element width and height is easy using flex. This box centered! HTML   < div class = "box-center" > < strong > This box centered ! </ strong > < div > CSS . box - center { background - color: red; width: 100 % ; height: 200 px; display: flex; align - items: center; justify - content:center; } . box - center strong { background - color: limegreen; padding: 0.5 em; }
Post a Comment
Read more