Simple modal - open onload
I'm trying to open the modal during the page load, but is not working. I believe the error should be in the script. the error is happening in styles. Can anyone help me?
this is in html code
<script type="text/javascript">
jQuery(document).ready(function(e){
$("#osx-modal-content, #osx-overlay, #osx-modal-data, #osx-container").modal({
});
});
</script>
other files are equal to SimpleModal -- Open OnLoad
Answer
Please see the working demo by running the snippet below.
1) it will load simple modal popup on load (Press key to get out)
2) You can use the demo button as well to see the sample working. (Press key to get out)
Hope this helps you to find out your problem are, else flick your code in fiddle I will take a look.
$(document).ready(function(){
$('#basic-modal-content').modal();
return false;
});
// Load dialog on click
$('#basic-modal .basic').click(function (e) {
$('#basic-modal-content').modal();
return false;
});
$('#btnSecond, #btnSecond2').click(function (e) {
$('#basic-modal-content2').modal();
return false;
});
/*
* SimpleModal Basic Modal Dialog
* http://www.ericmmartin.com/projects/simplemodal/
* http://code.google.com/p/simplemodal/
*
* Copyright (c) 2010 Eric Martin - http://ericmmartin.com
*
* Licensed under the MIT license:
* http://www.opensource.org/licenses/mit-license.php
*
* Revision: $Id: basic.css 257 2010-07-27 23:06:56Z emartin24 $
*/
#basic-modal-content {display:none;}
#basic-modal-content2 {display:none;}
/* Overlay */
#simplemodal-overlay {background-color:#000; cursor:wait;}
/* 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(http://www.ericmmartin.com/wordpress/wp-content/themes/emm-v3/demos/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;}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/simplemodal/1.4.4/jquery.simplemodal.min.js"></script>
<html>
<head>
<title> SimpleModal Basic Modal Dialog </title>
<meta name='author' content='Eric Martin' />
<meta name='copyright' content='2010 - Eric Martin' />
<!-- JS files are loaded at the bottom of the page -->
</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>
<input type='button' id='btnSecond2' value='Demo Second' class='basic'/>
<!-- modal content -->
<div id="basic-modal-content">
<h3>Basic Modal Dialog</h3>
some content
<input type='button' id='btnSecond' value='Demo Second' class='basic'/>
</div>
<div id="basic-modal-content2">
<h3>Basic Modal Dialog 2</h3>
some content
</div>
<!-- preload the images -->
<div style='display:none'>
<img src='img/basic/x.png' alt='' />
</div>
</div>
<div id='footer'>
</div>
</div>
<!-- Load jQuery, SimpleModal and Basic JS files -->
</body>
</html>