Search code examples
bootstrap-modal

disable modal to close, after clicked a button


enter image description here

I want to make this Modal like this:

  1. in first popup, you can close this modal by click cancel button or close mark button or click the outside of modal.
  2. when you click yes button, you cannot close the modal by click cancel button or close mark button or click the outside of modal, until the ajax process done.

how to achieve this? I have try using javascript when you click yes button, I change data-backdrop to static and data-keyboard to false. But didnt work.


Solution

  • You can achieve that using loading animation that blocked over your page.

    you can define 2 function such as loading() and stoploading().

    here's an example :

    CSS

        #overlay {
            position: absolute;
            top: 0;
            z-index: 100;
            width: 100%;
            height: 100%;
            display: none;
            background: rgba(0, 0, 0, 0.6);
        }
    
        .cv-spinner {
            height: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    
        .spinner {
            width: 40px;
            height: 40px;
            border: 4px #ddd solid;
            border-top: 4px #2e93e6 solid;
            border-radius: 50%;
            animation: sp-anime 0.8s infinite linear;
        }
    

    HTML

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
    </head>
    <body>
        <div id="overlay">
            <div class="cv-spinner">
                <span class="spinner"></span>
            </div>
        </div>
    
        <!--your content goes here -->
    </body>
    </html>
    

    JavaScript Function Using jQuery

        function loading() {
            $("#overlay").fadeIn(300);
        }
    
        function stoploading() {
            setTimeout(function() {
                $("#overlay").fadeOut(300);
            }, 500);
        }
    

    Ajax usage Example

    function something(){
            loading();
            $.ajax({
                type: "method",
                url: "url",
                data: "data",
                dataType: "dataType",
                success: function (response) {
                    //your function code goes here
                    stoploading();
                }
            });
        }