jQuery UI: Dialog không hiển thị nội dung

Em đang sử dụng jQuery UI để tạo một dialog hiển thị khi người dùng click đăng ký tài khoản, code HTMl của em như sau:

<div id="dialog_register_form" class="hidden" title="Đăng Ký Tài Khoản">
    <h3>Thông Tin Tài Khoản</h3>
    <form action="#" method="POST">
    ...
    </form>
</div>
<a href="#" role="button" class="btn btn-primary" id="btn-register">
    <i class="fa fa-user"></i> Đăng Ký
</a>

Code JavaScript để hiển thị dialog:

var dialog_register_form = $('#dialog_register_form');
dialog_register_form.dialog({
    modal         : true,
    autoOpen      : false,
    closeOnEscape : true,
    buttons       : {
        // "Submit": registerUser,
        Cancel: function() {
            $(this).dialog('close');
        }
    }
});

$("#btn-register").on('click', function(event) {
    event.preventDefault();
    dialog_register_form.dialog('open');
});

Khi test lại thì em thấy dialog vẫn hiển thị nhưng phần nội dung thì lại trống. Em đã kiểm tra kỹ với đoạn code ví dụ của jQuery UI và thấy không sai đoạn nào. Các bác help em fix lỗi này với ạ!!!

1 Answer(s)

Lê Trung Lê Trung

Trong đoạn code JavaScript trên khi bạn gọi hàm dialog như sau:

dialog_register_form.dialog({
...
});

Thì jQuery UI sẽ thay đổi thuộc tính display của phần tử này về giá trị none

Và khi bạn hiển thị dialog này:

dialog_register_form.dialog('open');

Thì jQuery UI đổi thuộc tính display của phần tử này về giá trị block.

Nếu nội dung của dialog không hiển thị thì bạn cần kiểm tra lại code CSS áp dụng cho phần tử này có đoạn nào thiết lập cho thuộc tính display này không.

P/S: Dựa trên tên class của phần tử HTML bạn sử dụng mình có thể đoán là bạn đang dùng Twitter Bootstrap. Nếu đúng thì để fix lỗi trên bạn cần bỏ class hidden trong div#dialog_register_form.

Content must be at least 100 characters

Related Discussion