jquery Bootstrap Modal的初始内容

wyyhbhjk  于 2023-05-28  发布在  jQuery
关注(0)|答案(1)|浏览(240)

我使用下面的JavaScript代码显示一个模态。

var modal = document.getElementsByClassName("modal")[0];
        var initialModalContent = document.getElementsByClassName("modal-content")[0].innerHTML;

        $("#plan_templates").click(function() {
            $(".modal .modal-body").html(initialModalContent); 
            $(".modal").modal("show");
        });

如果用户点击按钮,模态内容将发生变化。我在这里使用下面的代码。

$(".tplan").click(function() {
   var index = $(".tplan").index(this);
   $('.modal').find('.modal-content').html($('.tab').eq(index).html());
});

但我想显示初始内容总是当模态显示第一次。我该怎么做?

bxjv4tth

bxjv4tth1#

我也有同样的经历。。我试着用了你的代码并修改了一下,希望对你有帮助

<script>

    var modal = document.getElementsByClassName("modal")[0];
    var initialModalContent = document.getElementsByClassName("modal-content")[0].innerHTML;
    var replacementModalContent = document.getElementsByClassName("modal-content")[1].innerHTML;

    $("#plan_templates").click(function() {
        showModal()
    });

    function showModal() {
        if (localStorage.getItem('first') != (new Date()).getDate()) {
            $('.modal').find('.modal-content').html(initialModalContent);
        } else {
            $('.modal').find('.modal-content').html(replacementModalContent);
        }
        $(".modal").modal("show");
        localStorage.setItem('first', (new Date()).getDate());
    }
</script>

你也可以尝试在你的模式中隐藏/显示内容,你每天只会看到一次旧的内容

let $initial = $('.modal-content:eq(0)')
    let $replacement = $('.modal-content:eq(1)')

    $replacement.hide()
    // $initial.show() // initial already showing

    
    $("#plan_templates").click(function() {
        showModal2()
    });

    function showModal2(){
        if (localStorage.getItem('first') != (new Date()).getDate()) {
            $initial.show();
            $replacement.hide();
        } else {
            $initial.hide();
            $replacement.show();
        }
        $('.modal').modal('show')
        localStorage.setItem('first', (new Date()).getDate());
    }

相关问题