Simple Modal

Developer
Juan Gallardo
Size
3,208 Kb
Views
36,432
  1. Simple Modal Previews
  2. Simple Modal HTML Codes
  3. Simple Modal CSS Codes
  4. Simple Modal JS Codes

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 Previews
IQ Test

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('&lt;p&gt;&lt;b&gt;HTML&lt;/b&gt; elements&lt;/p&gt;'); // HTML</code></p>	<p><code>$('&lt;div&gt;&lt;/div&gt;').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'>	&copy; 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;	});
});
Simple Modal - Script Codes
Simple Modal - Script Codes
Home Page Home
Developer Juan Gallardo
Username JGallardo
Uploaded August 18, 2022
Rating 3
Size 3,208 Kb
Views 36,432
Do you need developer help for Simple Modal?

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!

Juan Gallardo (JGallardo) Script Codes
Name
Blog Concept 2
BruxZir - Home Page -3
Fixed Header when scrolling
A Pen by Juan Gallardo
BruxZir - Homepage - Video concept
BruxZir - Header with headroom
Plane Blog - Masonry Demo
Template - iPad Air - Vertical
Bruxzir - Sprite Practice
Travel Location Select
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!