我是JQuery的新手 - 不是javascript的新手。
能够使用demo index.html页面中提供的超链接按钮打开OSX STYLE DIALOG,但是想在页面加载时打开它。我在StackOverflow(How do I invoke a SimpleModal OSX dialog on page load?)上阅读了几个链接,但仍无法在完全相同的index.html页面中使用它。我最终通过以编程方式调用隐藏按钮元素的按钮单击来采取权宜之计措施 - 请参阅以下片段:
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>
所以我有两个问题:
答案 0 :(得分:0)
对于#1:
$(".osx").click();
对于#2,这是脚本:
<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>
确保包含样本中包含的图像/ CSS以获得样式。
答案 1 :(得分:0)
比尔,
如果您希望在页面加载时打开对话框,则有几个选项。您可以直接编辑osx.js文件,或者在加载osx.js文件后添加以下内容:
<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>