Открыть диалоговое окно или всплывающее окно или окно сообщения после загрузки всей страницы с использованием JavaScript или начальной загрузки - PullRequest
Новая
       2

Открыть диалоговое окно или всплывающее окно или окно сообщения после загрузки всей страницы с использованием JavaScript или начальной загрузки

0 голосов
/ 06 марта 2019

У меня есть страница jsp / javascript, которая показывает часть содержимого, основанного на некоторой бизнес-логике.Эта страница загружает некоторые данные, которые извлекаются из базы данных.Иногда загрузка страницы может занять больше времени.Таким образом, нет определенного времени.

Что нужно сделать:

Показать всплывающее окно / окно сообщения / диалоговое окно в середине экрана после загрузки всей страницы .для закрытия должна быть кнопка закрытия или кнопка «X».

Всплывающее окно / окно сообщения / диалоговое окно - это последовательность из 4-5 экранов / сообщений с содержимым.То есть, как только появляется всплывающее окно, оно показывает 1-й контент, тогда на этом всплывающем экране должен быть вид значка «следующий» или «>».нажав на это, он должен перейти к следующему экрану или содержанию.Когда вы дойдете до последнего содержимого или экрана, вы сможете прокрутить назад к первому сообщению.

Я пытался использовать https://www.w3schools.com/bootstrap/bootstrap_carousel.asp и https://www.w3schools.com/w3css/w3css_modal.asp. При этом мне трудно показатьмодальная или карусельная в messagebox / popup / dialogbox в в середине экрана после загрузки всей страницы

Я следовал здесь за некоторыми вопросами по stackoverflow.Они охватывают все основные вещи, но не совсем этот конкретный сценарий.

1 Ответ

0 голосов
/ 06 марта 2019

Если вы используете модал W3.CSS, в их первом примере есть небольшая подсказка на этой странице .В атрибуте onclick на кнопке есть небольшой фрагмент Javascript: 

document.getElementById('id01').style.display='block'

Чтобы получить такое поведение после завершения загрузки страницы, вы можете поместить его в прослушиватель событий объекта windowожидающее события load MDN doc .

Вот небольшой пример использования шаблона из модальной страницы W3.CSS: 

<!-- In your HTML -->
<div id="id01" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span
        onclick="document.getElementById('id01').style.display='none'"
        class="w3-button w3-display-topright">
        &times;
      </span>
      <p>Where your carousel goes</p>
    </div>
  </div>
</div>

/* 
  In a <script/> tag below the rest of your imported scripts
  or in a separate, linked .js file.
*/

window.addEventListener('load', function() {
  document.getElementById('id01').style.display = 'block';
});

Что касается карусели, вы можете просто заменить элемент <p /> внутри модала соответствующим кодом.Я бы начал с копирования / вставки слайд-шоу W3Schools пример .Убедитесь, что вы включили <link /> и <script />, необходимые для использования Bootstrap, и не забудьте заменить их изображения вашими.

Если вам нужна дополнительная помощь, пожалуйста, включите часть своего кода как таковуюлучше понять вашу проблему.

Берегите себя!

...