# Jak zobrazit modal nebo overlay v UpdateProgress

**URL:** <https://forum.dotvvm.com/t/jak-zobrazit-modal-nebo-overlay-v-updateprogress/180>\
**Category:** Discussion in Czech\
**Created:** [March 20, 2024, 11:19am UTC](https://forum.dotvvm.com/t/jak-zobrazit-modal-nebo-overlay-v-updateprogress/180 "2024-03-20T11:19:07Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![holajan](https://forum.dotvvm.com/user_avatar/forum.dotvvm.com/holajan/32/35_2.png) [@holajan](https://forum.dotvvm.com/u/holajan)\
**Post date:** [March 20, 2024, 11:19am UTC](https://forum.dotvvm.com/t/jak-zobrazit-modal-nebo-overlay-v-updateprogress/180/1 "2024-03-20T11:19:07Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![exyi](https://forum.dotvvm.com/user_avatar/forum.dotvvm.com/exyi/32/9_2.png) [@exyi](https://forum.dotvvm.com/u/exyi)\
**Post date:** [March 22, 2024, 10:17am UTC](https://forum.dotvvm.com/t/jak-zobrazit-modal-nebo-overlay-v-updateprogress/180/2 "2024-03-22T10:17:53Z")

</div>

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](https://stackoverflow.com/questions/9724035/how-can-one-create-an-overlay-in-css)). Ten UpdateProgress akorát nastavuje `display: none`, takže cokoliv je uvnitř by se mělo schovat.

---

<div class="post-metadata">

**Author:** ![holajan](https://forum.dotvvm.com/user_avatar/forum.dotvvm.com/holajan/32/35_2.png) [@holajan](https://forum.dotvvm.com/u/holajan)\
**Post date:** [March 22, 2024, 10:56am UTC](https://forum.dotvvm.com/t/jak-zobrazit-modal-nebo-overlay-v-updateprogress/180/3 "2024-03-22T10:56:24Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![exyi](https://forum.dotvvm.com/user_avatar/forum.dotvvm.com/exyi/32/9_2.png) [@exyi](https://forum.dotvvm.com/u/exyi)\
**Post date:** [March 22, 2024, 11:36am UTC](https://forum.dotvvm.com/t/jak-zobrazit-modal-nebo-overlay-v-updateprogress/180/4 "2024-03-22T11:36:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![holajan](https://forum.dotvvm.com/user_avatar/forum.dotvvm.com/holajan/32/35_2.png) [@holajan](https://forum.dotvvm.com/u/holajan)\
**Post date:** [March 23, 2024, 11:01am UTC](https://forum.dotvvm.com/t/jak-zobrazit-modal-nebo-overlay-v-updateprogress/180/5 "2024-03-23T11:01:12Z")

</div>

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

```auto
<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:

```auto
.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;
            }
        }
    }
}

```