Simple modal - open onload
I am trying to open the modality while the page is loading, but it doesn't work. I believe the error must be in the script. the error happens in the 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
+3
source to share
1 answer
See a working demo by running the snippet below.
1) it will load a simple modal popup on boot (press key to exit)
2) You can also use the demo button to see how the sample works. (Press the key to exit)
Hope this helps you sort out your problem, otherwise click your code in the fiddle. I'll see.
$(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>
0
source to share