Macos – How to call simplemodal osx plugin programmatically

clickeventsmacossimplemodal

I've implemented the simplemodal plugin for JQuery. Very nice btw! Where I'm having an issue, is I have a list of links that are generated from a database, when I click one, I make a "load" call and add the results to my osx-modal-content div. How do I call the osx plugin after my load completes? If I add class=osx to my a href, the modal opens before the content get into the div.

My Function to load html:

function loadContent(id) {
        $("#osx-modal-dialog").load("Item.cfm?ID="+id+"");
        // call OSX here????
        $('#osx-modal-dialog').modal();
    }

My DIV:

<div id="osx-modal-dialog">
  <div id="osx-modal-content">
<div id="osx-modal-title">Title</div>
<div id="osx-modal-data">
    <h2>Summary</h2>
    <p>Description</p>
    <p><button class="simplemodal-close">Close</button> <span>(or press ESC or click the overlay)</span></p>
</div>
  </div>
</div>

Currently the osx plugin is looking for input or a click event. I'm not sure how to script a 'click' event ofter my load. Or maybe there is a better way to call the plugin.

Includes:

Best Answer

Here's what I would do:

Modify the OSX content (I removed most of the content and added a placeholder):

<div id="osx-modal-content">
               <div id="osx-modal-title">OSX Style Modal Dialog</div>
               <div id="osx-modal-data">
                       <div id="osx-data-placeholder"></div>
                       <p><button class="simplemodal-close">Close</button> <span>(or press
ESC or click the overlay)</span></p>
               </div>
       </div>

Your loadContent function:

function loadContent(id) {
               var d = $('#osx-modal-content');

               // load your page
               $.get("Item.cfm?ID=" + id, function(data) {

                       // replace the placeholder with the results
                       $('#osx-data-placeholder', d[0]).html(data);

                       // open the osx modal
                       d.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
                       });
               });
       }

I haven't tested it, but I'm pretty sure this should do the trick.

-Eric

Related Solutions

Javascript – How to detect a click outside an element

Note: Using stopPropagation is something that should be avoided as it breaks normal event flow in the DOM. See this CSS Tricks article for more information. Consider using this method instead.

Attach a click event to the document body which closes the window. Attach a separate click event to the container which stops propagation to the document body.

$(window).click(function() {
  //Hide the menus if visible
});

$('#menucontainer').click(function(event){
  event.stopPropagation();
});

Jquery – simplemodal, close and then immediately reopen

You could also determine the dimensions of the new data and resize the container accordingly.

However, based on your method, you could do something like:

// inside the onShow callback for the first modal, bind the click event
onShow: function (dialog) {
    $('#Element input.Ajax', dialog.container[0]).click(function (e) {
        $("#new-modal").load("page.html", function () {
            $("#new-modal").modal({
                // your options
            });
        });
    });
}

Hope that helps.

-Eric

Related Topic

Jquery – SimpleModal — Open OnLoad