Question

I am trying pass links to simplemodal from :

<td><a href="games/BG-1001.php" class ="simple_modal" >EU-ch U12</a></td> 

and at the bottom of http://chesstao.com/test-1.php I have code for picking up the URL and for loading the iframe (but it is commented out).

<script src="js/jquery.simplemodal-1.4.1-min.js"></script>
<script src="js/basic-min.js"></script>

<script>
// Display an external page using an iframe
//var src = "http://365.ericmmartin.com/";

$("a").attr("href")
$('.simple_modal').click(function() {
var hrefval= $(this).attr("href");

});


//$.modal('<iframe src="' + src + '" height="450" width="830" style="border:0">', {
//closeHTML:"", containerCss:{backgroundColor:"#fff", borderColor:"#fff",
//height:450, padding:0, width:830}, overlayClose:true}); </script>

The problem is that I can’t use a literal to set src:
var src = “http://365.ericmmartin.com/”; //DW

because the URL in the table data changes.

Can somebody please tell me how to blend the commented code with the other code?. Am I correct in my assessment?

Answer 1

How about simply calling the modal() method from inside your click event?

$('.simple_modal').click(function(e) {
    // Get the href value of the <a> that was clicked
    var hrefval= $(this).attr("href");

    // Insert the href value into the parameter of the modal() method
    $.modal('<iframe src="' + hrefval + '" height="450" width="830" style="border:0">', {closeHTML:"", containerCss:{backgroundColor:"#fff", borderColor:"#fff", height:450, padding:0, width:830}, overlayClose:true});

    // preventDefault() stops the default behavior of the <a> that was clicked
    e.preventDefault();
});

Here is a simplified JSFiddle demo