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>