如何立即打开Bootstrap 5 Modal并加载AJAX内容

n8ghc7c1 于 12个月前发布在 Bootstrap

关注(0)|答案(1)|浏览(134)

Bootstrap 5 Modal在加载AJAX内容之前不会打开。这对我的用户来说是一个糟糕的用户体验，因为用户必须在点击View按钮后等待几秒钟才能打开Modal！
所以说，我怎么能在点击时立即加载Bootstrap 5模态加载呢？让AJAX内容在模态打开后多花2-3秒加载。
这是触发模式的按钮：<button data-id="269" class="view-post">View</button>
下面是加载模态内容的JS代码：

jQuery(function($) {
    $('body').on('click', '.view-post', function() {
        var data = {
            'action': 'load_post_by_ajax',
            'id': $(this).data('id'),
            'security': blog.security
        };
        $.post(blog.ajaxurl, data, function(response) {
            response = JSON.parse(response);
            $('#postModal h5#postModalLabel').text(response.title);
            $('#postModal .modal-body').html(response.content);
            var postModal = new bootstrap.Modal(document.getElementById('postModal'));
            postModal.show();
        });
    });
});

字符串

twitter-bootstrap

来源：https://stackoverflow.com/questions/77599670/how-to-open-bootstrap-5-modal-instantly-and-then-load-the-ajax-content

1条答案

按热度按时间

iyzzxitl1#

很长一段时间没有使用jQuery了，但是您应该能够显示对话框，使用一些加载指示符等进行预填充，调用ajax，然后在完成后使用新数据进行填充。
eg.

jQuery(function($) {
    $('body').on('click', '.view-post', function() {
        var data = {
            'action': 'load_post_by_ajax',
            'id': $(this).data('id'),
            'security': blog.security
        };
        //lets have a reference to title & body element
        var title = $('#postModal h5#postModalLabel');
        var body = $('#postModal .modal-body'); 
        //create our modal dialog
        var postModal = new bootstrap.Modal(document.getElementById('postModal'));
        //pre-populate with some loading info.
        title.text('Loading..');
        body.html('Please wait.');
        //now show dialog
        postModal.show();
        //now call ajax post
        $.post(blog.ajaxurl, data, function(response) {
            response = JSON.parse(response);
            //now update dialog with new data.
            title.text(response.title);
            body.html(response.content);
        });
    });
});

字符串

赞(0）回复(0）举报 12个月前

我来回答

如何立即打开Bootstrap 5 Modal并加载AJAX内容

1条答案

相关问题

热门标签

最新问答