我是新来的JQuery - 没有新的JavaScript。
能够打开使用演示index.html页面中提供的超链接按钮的OSX风格的对话框,但想打开它的页面加载。 我读的StackOverflow(几个链接:如何调用页面加载一个SimpleModal OSX对话? ),但还是没能得到它在完全相同的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>
所以,我有两个问题:
- 你怎么能调用类=“OSX”使用JavaScript / HTML编程?
- 为什么不使用$这项工作(“#OSX峰内容”)模式()。 在JavaScript调用(见上文片段)? 我想这在多个浏览器,并在屏幕上显示的唯一内容是此标记的内容:“DIV ID =” OSX模态标题”,并有在JScript的控制台没有错误。
对于#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。
法案,
如果你想在对话框上的页面加载打开,有几个选项。 您可以编辑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>