Question

In fact, I edited the sample HTML basic template from author Eric Martin and it dw.
How come? Here is the file: http://communitychessclub.com/basic/index.html and all needed files are clearly referenced correctly.

This the HTML to invoke the simplemodal:

<a href='#' class='basic' data-width="586" data-height="100">Demo</a>

This is the target div to popup:

<!-- modal content -->
<div id="basic-modal-content">
<p class="hyphenate"><span class="bold">George Carlin explains:</span> "Quality. Values. Style. Service. Selection. Convenience. Economy. Savings. Performance. Experience. Hospitality. Low rates. Friendly service. Name brands. Easy terms. Affordable prices. Money back guarantee. Free installation. Free admission. Free appraisal. Free delivery. Free alterations. Free home trial. And free parking.</p></div>

This is the javascript to process the modal:

<script>
jQuery(function ($) {
$('#basic-modal .basic').click(function (e) {
    var hrefval= $(this).attr("href"); 
    var $this = $(this); 
    var height_len = $this.data("height");  
    var width_len = $this.data("width"); 

$('#basic-modal-content').modal(

containerCss:{
        backgroundColor:"#ccc",
        borderColor:"#ccc",
        border:5,
        padding:5,
        height:'height_len+20',
        width:'width_len+20'
        });
return false;
});
});
</script>

Answer 1

Arent you missing a {} cus this gives an error:

missing ) after argument list
[Afbreken op deze fout] containerCss: { 

It should be something around containerCss like:

jQuery(function($) {
    $('#basic-modal .basic').click(function(e) {
        var hrefval = $(this).attr("href");
        var $this = $(this);
        var height_len = $this.data("height");
        var width_len = $this.data("width");

        $('#basic-modal-content').modal(
        {
            containerCss: {
                backgroundColor: "#ccc",
                borderColor: "#ccc",
                border: 5,
                padding: 5,
                height: height_len+20,
                width: width_len+20
            }
        });
        return false;
    });
});

Update how to use multiple

<a href='#' class='basic' data-connection="dialog1" data-width="586" data-height="100">Demo</a>
<a href='#' class='basic' data-connection="dialog2" data-width="586" data-height="100">Demo</a>

The Boxes

<!-- modal content -->
<div id="dialog1"><p class="hyphenate">BOX 1</p></div>
<div id="dialog2"><p class="hyphenate">BOX 2</p></div>

The script

jQuery(function($) {
    $('#basic-modal .basic').click(function(e) {
        var hrefval = $(this).attr("href");
        var $this = $(this);
        var height_len = $this.data("height");
        var width_len = $this.data("width");
        var id = $this.data("connection")

        $('#' + id).modal(
        {
            containerCss: {
                backgroundColor: "#ccc",
                borderColor: "#ccc",
                border: 5,
                padding: 5,
                height: height_len+20,
                width: width_len+20
            }
        });
        return false;
    });
});