Jak zobrazit modal nebo overlay v UpdateProgress

🇨🇿 Discussion in Czech
1

Ahoj,
Chtěl bych udělat, aby se během zpracování postbacku zobrazilo nějaké “točítko”, ale aby bylo přes celou stránku včetně nejakého overlay elementu.

Jak toho udělat?
Když v UpdateProgress použiju Bootstrap Modal, tak to nefunguje, protože jeho overlay zůstane napořád zobrazen. Nemáte na toto nějaký tip.

Díky.

2

To je dost zvláštní, ale když si ten overlay nastylujete sám, tak by vám to mělo fungovat v pohodě (html - How can one create an overlay in css? - Stack Overflow). Ten UpdateProgress akorát nastavuje display: none, takže cokoliv je uvnitř by se mělo schovat.

3

Vlatním overlay by to asi šlo, to můžu zkusit.
Tam jde o to, že když je to před ten Modal, kterým jsem si chtěl ušetřit práci, tak to bootstrap vytvoří někam do body, kde o tom ten UpdateProgress neví.

Šlo mě spíš o to, zda jste to už někde neřešili.

4

To je dost pravděpodobné, ale nevím o tom

5

Kdyby se to někomu hodilo, tak zde přikládám hotové řešení.

<dot:UpdateProgress Delay="390">
    <div class="loading-progress-overlay"></div>
    <div class="loading-progress">
        <div class="loading-progress-content">
            <div class="loading-progress-content-inner">
                <div class="loading-spinner" role="status"></div>
                <div class="loading-message">
                    <span>Pracuji...</span>
                </div>
            </div>
        </div>
    </div>
</dot:UpdateProgress>

a scss:

.loading-progress-overlay {
    z-index: 10150;
    border: none;
    margin: 0px;
    padding: 0px;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: rgb(85, 85, 85);
    opacity: 0.1;
    cursor: wait;
    position: fixed;
}

.loading-progress {
    z-index: 10161;
    position: fixed;
    padding: 0px;
    margin: 0px;
    width: 30%;
    top: 40%;
    left: 35%;
    text-align: center;
    color: rgb(0, 0, 0);
    border: 0px;
    cursor: wait;

    .loading-progress-content {
        display: inline-block;
        min-width: 125px;
        margin-left: -60px;
        padding: 14px 18px;
        margin: 0 auto;
        color: rgb(33, 37, 41) !important;
        font-size: 15px;
        font-weight: 400;
        text-align: center;
        vertical-align: middle;
        border: 1px solid rgba(0, 0, 0, 0.175);
        -webkit-border-radius: 8px;
        -moz-border-radius: 8px;
        -ms-border-radius: 8px;
        -o-border-radius: 8px;
        border-radius: 8px;
        background-color: #f8f8f8;
        -webkit-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
        -moz-box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
        box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);

        .loading-progress-content-inner {
            display: flex;

            .loading-spinner {
                width: 32px;
                height: 32px;
                margin-right: 14px;
                border: 3px solid currentcolor;
                border-right-color: transparent;
                border-radius: 50%;
                animation: 0.75s linear infinite spinner-border;
            }

            .loading-message {
                height: 32px;
                line-height: 32px;
                vertical-align: middle;
            }
        }
    }
}
1 Like