Question

I can use Eric Martin’s simplemodal somewhat. But I would like to call it inline with onclick.

Something inline like this:

<a href="http://ibm.com" onclick="$.modal({url:'http://ibm.com',
width:586,height:570,animate:true,opacity:60})"> IBM </a>

Not like this: (typically at the bottom of the page)

$('.free_modal').click(function(e) {var hrefval= $(this).attr("href");
$.modal('<iframe src="' + hrefval + '" height="535" width="1000" 
style="border:none; margin:0 9px; padding-bottom:0; padding-top:10px">',
{closeHTML:"", overlayCss: {backgroundColor:"#000", opacity:85},
containerCss:{backgroundColor:"#B9B54F", borderColor:"#B9B54F", border:20,
height:555,padding:10, width:1020}, overlayClose:true}); e.preventDefault();
});
</script>

Can anybody tell me how to do this. I read the docs, but it’s not clear to me. Perhaps this shouldn’t be done entirely inline with “onclick”, maybe a class with sensible defaults could be invoked (i.e. a class without height and width and literal url).

I have a previous related post at one simplemodal script to handle images which gives:

<script>
$(document).ready(function(){
$(".photo").click(function(e) {
  var hrefval= $(this).attr("href"); 
  $.modal('<img src=" ' + hrefval + '">', { 
    containerCss: { height:'auto',width:'auto'}, 
    overlayClose: true 
  });
  e.preventDefault();
});
});
</script>

and I changed $.modal(‘

Any suggestions? I would really like to standardize on simplemodal for all my modal needs.

Update: I used Chris Heald’s idea and came up with this for iframe simplemodal. Note that it sets the container size as well as the iframe size, based on inline height and width.

<script>
$('.ibm_modal').click(function(e) {var hrefval= $(this).attr("href"); 
var $this = $(this); var height_len = $this.data("height"); 
var width_len = $this.data("width"); 
$.modal('<iframe src="' + hrefval + '" height="' + height_len + '" width="' 
+ width_len + '" style="border:none; margin:0 9px; padding-bottom:0; 
padding-top:10px">',
{closeHTML:"", overlayCss: {backgroundColor:"#000", opacity:85},
containerCss:{backgroundColor:"#B9B54F", borderColor:"#B9B54F", border:20, 
padding:10, height:'height_len+10', width:'width_len+10'}, overlayClose:true});
e.preventDefault();
});
</script>

Answer 1

I’d just use this using HTML5 data attributes, and jQuery’s data() method.

<a href="http://ibm.com" data-width="586" data-height="570" class="modal">IBM</a>

Then at the bottom of the page, or in a $(document).ready() section:

<script>
  $(".modal").click(function(e) {
    var $this = $(this);
    $.modal({
      url: $this.attr("href"),
      width: $this.data("width"),
      height: $this.data("height"),
      animate: true,
      opacity: 60
    })
    e.stopPropagation();
    return false;
  })
</script>

You can just tag any element with a “modal” class, and provide data-width and data-height attributes, and the correct Javascript behaviors are attached to the correct elements. This has the added benefit of being correct from the unobtrusive Javascript design goal, and is just easier to maintain.