Modal

Tạo mới Lọc sản phẩm lỗi Xuất Excel Import Excel

Tạo một modal mới

<div class="ui modal" id="modal-example1"> <!-- modal tạo có id là modal-example1 -->
    <div class="header">Tiêu đề modal</div>
    <div class="content">
        <p>Nội dung modal</p>
    </div>
    <div class="actions">
        <div class="ui deny button">Hủy</div>

        <div class="ui positive right labeled icon button">
            Đồng ý
            <i class="checkmark icon"></i>
        </div>

    </div>
</div>
    

Tạo button gọi modal

<a href="#modal-example1" class="ui button show-modal"> <!-- Gọi modal có id là modal-example1, thêm class "show-modal" -->
    Gọi modal bẳng thẻ a
</a>

<button data-modal="modal-example1" class="ui button show-modal"> <!-- Gọi modal có id là modal-example1 -->
    Gọi modal bằng button
</button>
    

Code javascript, khởi tạo modal khi element có class "show-modal"

$(".show-modal").on("click", function (e) {
    e.preventDefault();
    var $this = $(this);
    var name;
    if ($this.attr('data-modal')) {
        name = "#" + $this.data("modal");
    } else {
        name = $this.attr('href')
    }
    $(name)
        .modal({
            transition: "fade",
            closable: false,
            autofocus: false,
            detachable: false,
        })
        .modal('show')
});
    

Callback modal

$('#btn-modal-callback').click(function(){
    $('#modal-callback')
            .modal({
                closable  : false,
                onShow    : function(){
                   console.log("Modal show");
                },
                onVisible    : function(){ /
                    console.log("Modal visible");
                },
                onHide    : function(){
                    console.log("Modal hide");
                },
                onHidden    : function(){
                    console.log("Modal hidden");
                },
                onDeny    : function(){
                    window.alert('Wait not yet!');
                    return false;
                },
                onApprove : function() {
                    window.alert('Approved!');
                }
            })
            .modal('show')
    ;
});