Overlay Screen

Developer
Zubin Mistry
Size
1,978 Kb
Views
12,144
  1. Overlay Screen Previews
  2. Overlay Screen HTML Codes
  3. Overlay Screen CSS Codes
  4. Overlay Screen JS Codes

How do I make an overlay screen?

What is a overlay screen? How do you make a overlay screen? This script and codes were developed by Zubin Mistry on 10 January 2023, Tuesday.

Overlay Screen Previews
IQ Test

Overlay Screen - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Overlay Screen</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <button id="show" class="btn btn-primary btn-lg col-md-offset-1">Show Overlay</button>
<div id="overlay" class="col-md-12"> <div id="overlay-content" class="col-md-8 col-md-offset-2"> <h1 class="pull-left">Overlay Screen</h1> <i class="glyphicon glyphicon-remove pull-right"></i> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Overlay Screen - Script Codes CSS Codes

#overlay { background-color: rgba(0, 0, 0, 0.8); display: none; height: 100%; position: fixed; top: 0px; width: 100%;
}
#overlay-content { background-color: #FFFFFF; border: 1px solid #000000; border-radius: 10px; box-shadow: 0 0 20px #000000; padding: 50px; top: 12%;
}
.btn, .glyphicon { cursor: pointer;
}
.glyphicon { font-size: 2em;
}
#show { position: fixed; top: 100px;
}

Overlay Screen - Script Codes JS Codes

$('#show').click(function() { $('#overlay').fadeToggle('slow');
});
$('.glyphicon').click(function() { $('#overlay').fadeOut('slow');
})
Overlay Screen - Script Codes
Overlay Screen - Script Codes
Home Page Home
Developer Zubin Mistry
Username zbnmstry
Uploaded January 10, 2023
Rating 3
Size 1,978 Kb
Views 12,144
Do you need developer help for Overlay Screen?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Zubin Mistry (zbnmstry) Script Codes
Name
Kaman Article
A Pen by Zubin Mistry
1px Border Issue
Navbar
Reviews and Ratings Star
Carousel
DWTC BOX
Flipkart styled Comparison List
Understanding KO Observables
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!