SimpleModal - Open OnLoad
I am new to JQuery - not new to javascript.
It was possible to open the OSX STYLE DIALOG using the hyperlink button provided on the demo index.html page, but would like to open it on page load. I read a couple of links on StackOverflow ( How do I bring up the SimpleModal OSX dialog on page load? ) But still couldn't get it to work in the same index. html page. I finally resorted to the stop method, by programmatically calling the button click of the hidden button element - see the following snippet:
onLoad="document.getElementById('load_OSX_Example').click();">
<input type="hidden" id="load_OSX_Example" value="" class='osx'>
<script type="text/javascript" language="javascript">
//#### open the OSX Modal ##########
$(document).ready(function(){
$("#osx-modal-content").modal();
});
</script>
I have two questions:
- How can you reference class = 'osx' with javascript / html programmatically?
- Why won't this work be used with $ ("# osx-modal-content"). modal (); call javascript (see snippet above)? I tried this in several browsers and the only content displayed on the screen was the content of this tag: "div id =" osx-modal-title "and there were no errors in the jscript console.
source to share
For # 1:
$(".osx").click();
For # 2, here's the script:
<script type="text/javascript" language="javascript">
$(function() {
$("#osx-modal-content").modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: '<div class="close"><a href="#" class="simplemodal-close">x</a></div>',
minHeight:80,
opacity:65,
position:['0',],
overlayClose:true,
onOpen:function (d) {
var self = this;
self.container = d.container[0];
d.overlay.fadeIn('slow', function () {
$("#osx-modal-content", self.container).show();
var title = $("#osx-modal-title", self.container);
title.show();
d.container.slideDown('slow', function () {
setTimeout(function () {
var h = $("#osx-modal-data", self.container).height()
+ title.height()
+ 20; // padding
d.container.animate(
{height: h},
200,
function () {
$("div.close", self.container).show();
$("#osx-modal-data", self.container).show();
}
);
}, 300);
});
})
},
onClose:function (d) {
var self = this;
d.container.animate(
{top:"-" + (d.container.height() + 20)},
500,
function () {
self.close(); // or $.modal.close();
}
);
}
});
});
</script>
Make sure you include the images / CSS included in the sample to get the styling.
source to share
Bill,
If you want the dialog to open on page load, there are several options. You can edit the osx.js file directly or load the osx.js file by adding the following:
<script type='text/javascript'>
jQuery(function ($) {
$("#osx-modal-content").modal({
overlayId: 'osx-overlay',
containerId: 'osx-container',
closeHTML: '<div class="close"><a href="#" class="simplemodal-close">x</a></div>',
minHeight:80,
opacity:65,
position:['0',],
overlayClose:true,
onOpen:OSX.open,
onClose:OSX.close
});
});
</script>
source to share