SimpleModal - Открыть OnLoad - PullRequest
Новая
       19

SimpleModal - Открыть OnLoad

0 голосов
/ 16 февраля 2010

Я новичок в JQuery - не новичок в JavaScript.

Был в состоянии открыть OSX STYLE DIALOG с помощью кнопки гиперссылки, представленной на странице demo index.html, но хотел бы открыть ее при загрузке страницы. Я прочитал пару ссылок в 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. Как вы можете вызывать class = 'osx', используя javascript / html программно?
  2. Почему это не работает при использовании $ ("# osx-modal-content"). Modal (); позвонить в JavaScript (см. фрагмент выше)? Я пробовал это в нескольких браузерах, и единственным содержимым, отображаемым на экране, было содержимое этого тега: "div id =" osx-modal-title ", и в консоли jscript не было ошибок.

Ответы [ 2 ]

0 голосов
/ 17 февраля 2010

Bill

Если вы хотите, чтобы диалоговое окно открывалось при загрузке страницы, есть несколько вариантов. Вы можете редактировать файл 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>
0 голосов
/ 16 февраля 2010

Для № 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, включенные в образец, чтобы получить стиль.

...