Question

我尝试在模态中使用关闭模态按钮但不起作用。

我的代码：

<center><button class="bleu b_modal">Modal test</button></center>

<script type="text/javascript">

    $(".b_modal").click(function(e) {
        e.preventDefault();
        modal.open({content: '\
            <center><button class="b_close">Close modal</button></center>\
        '});
    });

    $('.b_close').click(function(e){
        e.preventDefault();
        modal.close();
    });

    var modal = (function(){
        var
        method = {},
        $modal,
        $content,
        $close;

        method.open = function(settings) {
            $content.empty().append(settings.content);
            $modal.show();
            document.body.style.overflow = "hidden";
        };

        method.close = function() {
            $modal.hide();
            $content.empty();
            document.body.style.overflow = "auto";
        };

        $modal = $('<div id="modal"></div>');
        $content = $('<div id="modal_content"></div>');
        $close = $('\
            <center><button class="b_close">Close modal</button></center>\
        ');

        $modal.hide();
        $modal.append($content, $close);

        $(document).ready(function(){
            $('body').append($modal);
        });

        $close.click(function(e){
            e.preventDefault();
            method.close();
        });

        return method;
    }());

</script>

模态上的关闭按钮不起作用，但第二个关闭按钮模式正在工作。问题出在我的$('.b_close').click，但我尝试过的都没有。

modal.open({content: '\
            <center><button class="b_close">Close modal</button></center>\
        '});

Answer 1

这些线似乎是你的问题：

modal.open({content: '\<center><button class="b_close">Close modal</button></center>\'});
$close = $('\<center><button class="b_close">Close modal</button></center>\');

删除中心标记，HTML5中不支持这些标记。另外，删除反斜杠（\）。最后一个实际上正在逃避＆＃39;否则会终止你的字符串。

$close = $('<button class="b_close">Close modal</button>');

我建议不要将按钮传递给.open（）方法。只需称呼它：

modal.open();

然后在函数中使用var $ close。

var  $close = $('<button class="b_close">Close modal</button>');

    method.open = function() {
        $content.append($close);
        $modal.show();
        document.body.style.overflow = "hidden";
    };

最后，您不需要在.open（）和.close（）方法中对内容调用.empty（）。

我已对您的代码进行了一些修改，这是一个有效的工作：https://jsfiddle.net/0nxv597a/2/

使用按钮关闭模态

1 个答案: