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

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
Copyright seskew ©
  • HTML
  • CSS
<!DOCTYPE html>
<html lang="en" >

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



  <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 class="black_back"></div>



/*Downloaded from */
.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%;
	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%;