simplemodal не выбирает data-height и data-width - PullRequest
Новая
       14

simplemodal не выбирает data-height и data-width

0 голосов
/ 15 ноября 2011

Фактически, я отредактировал образец базового HTML-шаблона от автора Эрика Мартина, и это dw. Как получилось? Вот файл: http://communitychessclub.com/basic/index.html и все необходимые файлы четко указаны правильно.

Этот HTML-код для вызова простого режима: 

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

Это целевой div для всплывающего окна: 

<!-- 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>

Это javascript для обработки модальных: 

<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>

1 Ответ

1 голос
/ 15 ноября 2011

Если вы пропустили {}, это выдает ошибку: 

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

Это должно быть что-то вокруг контейнера, например: 

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;
    });
});

Обновление как использовать несколько 

<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>

Коробки 

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

Сценарий 

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;
    });
});
...