CODEWITHSUNDEEP
jquerypluginsonloadsimplemodal
Bill Griffith
Bill Griffith

Reputation: 31

SimpleModal -- Open OnLoad

I'm new to JQuery -- not new to javascript.

Was able to open the OSX STYLE DIALOG using the hyperlink button provided in the demo index.html page, but would like to open it on the page load. I read a couple links on StackOverflow (How do I invoke a SimpleModal OSX dialog on page load?), but still could not get it to work in the exact same index.html page. I finally resorted to a stopgap measure by programmatically invoking the button click of a hidden button element -- see following fragment:

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>

So I have two questions:

  1. How can you invoke the class='osx' using javascript/html programmatically?
  2. Why won't this work using the $("#osx-modal-content").modal(); call in javascript (see fragment above)? I tried this in multiple browsers, and the only content that displayed on the screen was content of this tag: "div id="osx-modal-title", and there was no error in the jscript console.

Upvotes: 0

Views: 7596

Answers (2)

Eric Martin
Eric Martin

Reputation: 2841

Bill,

If you want the dialog to open on page load, there are a couple of options. You can edit the osx.js file directly, or after you've loaded the osx.js file, add the following:

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

Upvotes: 0

Nick Craver
Nick Craver

Reputation: 630607

For #1:

$(".osx").click();

For #2, here's the script:

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

Make sure you include the images/CSS included in the sample to get the styling.

Upvotes: 0

Related Questions