Simple Modal
How do I make an simple modal?
From http://www.ericmmartin.com/projects/simplemodal/. What is a simple modal? How do you make a simple modal? This script and codes were developed by Juan Gallardo on 18 August 2022, Thursday.
Simple Modal - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Modal</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='container'> <div id='logo'> <h1>Simple<span>Modal</span></h1> <span class='title'>A Modal Dialog Framework Plugin for jQuery</span> </div> <div id='content'> <div id='basic-modal'> <h3>Basic Modal Dialog</h3> <p>A basic modal dialog with minimal styling and no additional options. There are a few CSS properties set internally by SimpleModal, however, SimpleModal relies mostly on style options and/or external CSS for the look and feel.</p> <input type='button' name='basic' value='Demo' class='basic'/> or <a href='#' class='basic'>Demo</a> </div> <!-- modal content --> <div id="basic-modal-content"> <h3>Basic Modal Dialog</h3> <p>For this demo, SimpleModal is using this "hidden" data for its content. You can also populate the modal dialog with an AJAX response, standard HTML or DOM element(s).</p> <p>Examples:</p> <p><code>$('#basicModalContent').modal(); // jQuery object - this demo</code></p> <p><code>$.modal(document.getElementById('basicModalContent')); // DOM</code></p> <p><code>$.modal('<p><b>HTML</b> elements</p>'); // HTML</code></p> <p><code>$('<div></div>').load('page.html').modal(); // AJAX</code></p> <p><a href='http://www.ericmmartin.com/projects/simplemodal/'>More details...</a></p> </div> <!-- preload the images --> <div style='display:none'> <img src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/x.png' alt='' /> </div> </div> <div id='footer'> © 2013 <a href='http://www.ericmmartin.com/'>Eric Martin</a><br/> <a href='https://github.com/ericmmartin/simplemodal'>SimpleModal on GitHub</a><br/> <a href='http://twitter.com/ericmmartin'>@ericmmartin</a> | <a href='http://twitter.com/simplemodal'>@simplemodal</a> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple Modal - Script Codes CSS Codes
#basic-modal-content {display:none;}
/* Overlay */
#simplemodal-overlay {background-color:#000;}
/* Container */
#simplemodal-container {height:360px; width:600px; color:#bbb; background-color:#333; border:4px solid #444; padding:12px;}
#simplemodal-container .simplemodal-data {padding:8px;}
#simplemodal-container code {background:#141414; border-left:3px solid #65B43D; color:#bbb; display:block; font-size:12px; margin-bottom:12px; padding:4px 6px 6px;}
#simplemodal-container a {color:#ddd;}
#simplemodal-container a.modalCloseImg {background:url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/x.png') no-repeat; width:25px; height:29px; display:inline; z-index:3200; position:absolute; top:-15px; right:-16px; cursor:pointer;}
#simplemodal-container h3 {color:#84b8d9;}
/* IE 6 hacks */
#simplemodal-container a.modalCloseImg {background:none; right:-14px; width:22px; height:26px; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/101702/x.png',sizingMethod='scale');}
/* demo */
body {background:#fff; color:#333; font: 12px/22px verdana, arial, sans-serif; height:100%; margin:0 auto; width:100%;}
h1 {color:#3a6d8c; font-size:34px; line-height:40px; margin:0;}
h3 {color:#3a6d8c; font-size:22px; line-height:26px; font-weight:normal; margin:0 0 8px 0;}
img {border:0;}
#logo {margin-bottom:20px; width:300px;}
#logo h1 {color:#666; letter-spacing:-1px; font-weight:normal;}
#logo h1 span {color:#444; font-weight:bold;}
#logo .title {color:#999; font-size:12px;}
#container {margin:0 auto; padding-top:20px; width:800px;}
#content {border-bottom:1px dotted #999; border-top:1px dotted #999; padding:20px 0;}
#footer {clear:left; color:#888; margin:20px 0;}
#footer a:link, #footer a:visited {color:#888; text-decoration:none;}
#footer a:hover {color:#333; text-decoration:underline;}
Simple Modal - Script Codes JS Codes
jQuery(function ($) { // Load dialog on page load //$('#basic-modal-content').modal(); // Load dialog on click $('#basic-modal .basic').click(function (e) { $('#basic-modal-content').modal(); return false; });
});
Developer | Juan Gallardo |
Username | JGallardo |
Uploaded | August 18, 2022 |
Rating | 3 |
Size | 3,208 Kb |
Views | 36,432 |
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!
Name | Size |
Blog Concept 1 | 9,972 Kb |
BruxZir - Homepage - Video concept | 3,039 Kb |
Working demo of Headroom.js | 12,199 Kb |
Saturn Grid System - Prototype1 | 1,806 Kb |
A Pen by Juan Gallardo | 1,823 Kb |
Demo - swipe.js | 3,351 Kb |
International Sort | 2,564 Kb |
Button - Test | 2,834 Kb |
BruxZir - Tablet - Home Page | 3,414 Kb |
Travel Location Select | 2,218 Kb |
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!
Name | Username | Size |
Fixed with using Calc | Tomleo | 2,542 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
SVG Scalable Text | Said_FD | 1,451 Kb |
Filter inputs | Rowinf | 1,721 Kb |
Learning canvas drawing | Aurer | 2,204 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
Funny menu | AxeLVaisper | 4,671 Kb |
Search Box in Content Moves to Fixed Header | Chriscoyier | 2,768 Kb |
Pomodoro Timer | Sdas13 | 2,900 Kb |
Speech bubbles | Something | 1,547 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!