Модальное окно jquery

287
29 марта 2017, 16:41

Пишу на asp.net mvc, создал модальное окно.

Окно работает, но вот есть проблема, при перезагрузке страницы на сотые секунды постоянно отображаются все теги и текст который внутри контейнера модального окна (в том месте где и находится контейнер).

Почему так происходит? Именно в asp, тестил в обычной html странице, там все нормально как и здесь

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script 
  src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js" 
  integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E=" 
  crossorigin="anonymous"></script> 
   
   
<script> 
    $(function () { 
        $("#modal-dialog").dialog({ 
            autoOpen: false, 
            width: 400, 
            height: 600, 
            show: { 
                duration: 1000 
            }, 
 
            hide: { 
                duration: 1000 
            } 
        }); 
 
        $("#modal-opener").click(function () { 
            $("#modal-dialog").dialog("open"); 
        }); 
    }); 
</script> 
<button id="modal-opener">ok</button> 
 
<div id="modal-dialog" title="Введите данные и мы с вами свяжемся"> 
        <p>sdsdfsdfsfsfsdf</p> 
</div>

Answer 1

Браузер успевает отрисовать html перед тем, как выполнится

$("#modal-dialog").dialog({ ...

Сделайте диалог изначально невидимым:

<div id="modal-dialog" style="display:none;" ...
READ ALSO
Предзагрузка картинки для background

Предзагрузка картинки для background

Добрый день, пишу свой прелодер на сайт, на блок добавлена background-image *svg и установлен background-color, однако иногда интернет подлагивает , bg-image грузит...

283
index.html подключает `styles.less` вместо `styles.css`

index.html подключает `styles.less` вместо `styles.css`

почему у меня сменилось stylescss на styles

245
div width 100% overflow-x

div width 100% overflow-x

Как реализовать прокрутку при div width = 100%; ? При установке ширины блока в пикселях все отлично работает

201