0

我是 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>

所以我有两个问题：

  1. 如何以编程方式使用 javascript/html 调用 class='osx'？
  2. 为什么不能使用 $("#osx-modal-content").modal(); 在javascript中调用（见上面的片段）？我在多个浏览器中尝试过，屏幕上显示的唯一内容是这个标签的内容：“div id="osx-modal-title"，并且在 jscript 控制台中没有错误。
4

2 回答 2

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>
于 2010-02-17T04:58:51.617 回答
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 以获取样式。

于 2010-02-16T15:29:11.810 回答