Создание модального окна при загрузке страницы

Question

Я использую фреймворк Kube ( http://imperavi.com/kube/), который включает в себя модальную функцию. К сожалению, документация немного скудна, или я слишком тупой ( http://imperavi.com/kube/tools/js-modal/).

У них есть пример кода, показывающий, как запускать модалы по нажатию кнопки, но я пытаюсь запустить его при загрузке тела. Может ли кто-нибудь с опытом работы с Kube или лучшим пониманием JS/JQuery помочь мне в этом? Я хочу убедиться, что я могу указать параметры, такие как ширина и размытие.

Я знаю, что существует много модальных плагинов, но я пытаюсь ограничить свой проект только этой единственной платформой.

Answer 1

Это будет работать на окне готово. http://jsfiddle.net/418hmnjy/2/. При этом не используются библиотеки. Только HTML, CSS и JavaScript.

HTML

<div id="modal">
    <div class="modalconent">
         <h1></h1>

        <p>fasfsdfasfsfsdfsdfsdsffsd</p>
        <button id="button">Close</button>
    </div>
</div>

JavaScript

window.onload = function () {
    document.getElementById('button').onclick = function () {
        document.getElementById('modal').style.display = "none"
    };
};

CSS

#modal {
    position: fixed;
    font-family: Arial, Helvetica, sans-serif;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.8);
    z-index: 99999;
    height: 100%;
    width: 100%;
}
.modalconent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    width: 80%;
    padding: 20px;
}