Mobile Modal Error Message - Retina

In this example below you will see how to do a Mobile Modal Error Message - Retina with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by seskew, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright seskew ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Mobile Modal Error Message - Retina</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="modal_mobile_retina openSansText">
  <div class="title openSansText boldText">Error Header</div>
  <span class="content openSansText">Your order could not be processed. Please try again.</span>
  <div class="button openSansText">OK</div>
</div>


<div class="black_back"></div>
  
  

</body>

</html>

/*Downloaded from https://www.codeseek.co/seskew/mobile-modal-error-message-retina-Aaqtz */
.openSansText {
	font-family: 'Open Sans', sans-serif;
	color: black;
  font-size: 13px;
  line-height: 20px;
}

.boldText {
	font-weight: 700;
}

.black_back {
	position: fixed;
	background: rgba(0,0,0,0.2) left top;
	width: 100%;
	height:100%;
	z-index: 99;
}

/* don't include above styles in final! */


.modal_mobile_retina {
  width: 560px;
  position: fixed;
  padding: 60px 0 0 0;
  background-color: #fff;
  z-index: 100;
  border-radius: 10px;
}

.modal_mobile_retina div.title.openSansText.boldText {
	font-size: 40px;
	text-align: center;
}

.modal_mobile_retina .content {
	font-size: 28px;
	line-height: 40px;
  text-align: center;
  display: inline-block;
	margin: 40px 40px 60px 40px;
}

.modal_mobile_retina .button {
	border-top: 2px solid #E9E9E9;
	font-size: 32px;
	color: #3d7ac3;
	line-height: 88px;
	text-align: center;
	width: 100%;
}

Comments