SimpleModal - Open OnLoad

Question

Я новичок в 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> 

Поэтому у меня есть два вопроса:

1. Как вы можете вызвать класс = «osx» с программным обеспечением javascript/html?
2. Почему эта работа не работает с использованием $ ("# osx-modal-content"). Modal(); вызвать javascript (см. фрагмент выше)? Я попробовал это в нескольких браузерах, и единственным содержимым, отображаемым на экране, было содержимое этого тега: «div id =« osx-modal-title », и в консоли jscript не было ошибки.

Answer 1

для # 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, включенных в выборку, чтобы получить стиль

Answer 2

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>