Reputation: 31
I'm new to JQuery -- not new to javascript.
Was able to open the OSX STYLE DIALOG using the hyperlink button provided in the demo index.html page, but would like to open it on the page load. I read a couple links on StackOverflow (How do I invoke a SimpleModal OSX dialog on page load?), but still could not get it to work in the exact same index.html page. I finally resorted to a stopgap measure by programmatically invoking the button click of a hidden button element -- see following fragment:
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>
So I have two questions:
Upvotes: 0
Views: 7596
Reputation: 2841
Bill,
If you want the dialog to open on page load, there are a couple of options. You can edit the osx.js file directly, or after you've loaded the osx.js file, add 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>
Upvotes: 0
Reputation: 630607
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.
Upvotes: 0