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

Question

在加载 AJAX 内容之前，Bootstrap 5 Modal 不会打开。对于我的用户来说，这是一个糟糕的用户体验，因为用户在单击

View

按钮后必须等待几秒钟才能打开模式！

话虽如此，如何在点击时立即加载 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();
        });
    });
});

Answer 1

很长一段时间没有使用 jQuery，但你应该能够显示对话框，预先填充一些加载指示器等，调用你的 ajax，然后在完成后填充新数据。

例如。

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