Как реализовать модальное окно

[max506]

Коллеги, приветствую.
Подскажите, каким образом можно реализовать модальные окна, как в классическом интерфейсе?
1. Нажимаю я на кнопку, и разворачивается окно, в котором можно установить заголовок, сообщение внутри окна, иконку, количество кнопок и подписи на них (Да, Нет, Отмена).
2. Такое же окно, но на нем еще добавлены элементы выбора: check box, radio button, выпадающие списки и т.д.

Можно ли это сделать стандартными средствами MJD или надо что-то на HTML делать?
Покажите, плз, примеры, если есть у кого нечто подобное.

[ivannag]

1. создаем кнопку (в моем случаех хтмл тип, с разными состояниями, но опишу только одно)
2. создаем состояние, указываем для него условия отображения (если нужно чтоб оно срабатывало и отображалось только при каком-то условии) и в поле код вставляем подобный код

СпойлерПоказать

Код: Выделить всё

<a href="#win1"><img title="" src="/img/icons/buttons/camera_on.png" alt="" /></a>
<!-- Модальное окно №1 -->
   <a href="#x" class="overlay" id="win1"></a>
   <div class="popup">
    <iframe src="http://stream.ntktv.ua/pysanka.html" height="290px"></iframe>
     
  <!--  <img src="http://192.168.1.33:8080/video">  -->
      <p style="font-size:25px;color:white;text-align:center;">
      Вебка из инета
      </p>
      <a class="close"title="Закрыть" href="#close"></a>
    </div>

не забываем подключить css стили, любым способом... сам css код в моем случае

СпойлерПоказать

Код: Выделить всё

/*________________________*/
/*  модальное окно*/
/*________________________*/

/* Базовые стили слоя затемнения и модального окна  */
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
/* фон затемнения */
    background-color: rgba(0, 0, 0, 0.65);
    position: fixed; /* фиксированное поцизионирование */
    cursor: default; /* тип курсара */
}
/* активируем слой затемнения */
.overlay:target {
    display: block;
}
/* стили модального окна */
.popup {
    top: -100%;
    right: 0;
    left: 50%;
    font-size: 14px;
     z-index: 20;
    margin: 0;
    width: 50%;
    min-width: 250px;
    max-width: 500px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
    position: fixed;
    padding: 15px;
    border: 1px solid #383838;
    background: #000;
/* скругление углов */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
/* внешняя тень */
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}
/* активируем модальный блок */
.overlay:target+.popup {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
/* формируем кнопку закрытия */
.close {
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    position: absolute;
    padding: 0;
    border: 4px solid #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 20px;
    background-color: rgba(61, 61, 61, 0.8);
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    text-align: center;
    text-decoration: none;
    font: 25px/40px 'Tahoma', Arial, sans-serif;
    font-weight: bold;
    -webkit-transition: all ease .8s;
    -moz-transition: all ease .8s;
    -ms-transition: all ease .8s;
    -o-transition: all ease .8s;
    transition: all ease .8s;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    font-size: 20px;
}
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);    
}
/* изображения внутри окна */
.popup img {
    width: 100%;
    height: auto;
}
/* миниатюры слева/справа */
.pic-left, 
.pic-right {
    width: 25%;
    height: auto;
}
.pic-left {
    float: left;
    margin: 5px 15px 5px 0;
}
.pic-right {
    float: right;
    margin: 5px 0 5px 15px;
}
/* элементы м-медиа, фреймы */
.popup embed, 
.popup iframe {
    top: 0;
    right: 0;
    bottom: 0; 
    left: 0; 
    display:block;
    margin: auto;
    min-width: 320px;
    max-width: 600px;
    width: 100%;
}
.popup h2 { /* заголовок 2 */
    margin: 0;
    color: #008000;
    padding: 5px 0px 10px;
    text-align: left;
    text-shadow: 1px 1px 3px #adadad;
    font-weight: 500;
    font-size: 1.4em;
    font-family: 'Tahoma', Arial, sans-serif;
    line-height: 1.3;
}
/* параграфы */
.popup p {margin: 0; padding: 5px 0}

это всего лишь пример взятый в свое время с инета и чуть переработанный, но суть думаю понятна

[ivannag]

1. создаем кнопку (в моем случаех хтмл тип, с разными состояниями, но опишу только одно)
2. создаем состояние, указываем для него условия отображения (если нужно чтоб оно срабатывало и отображалось только при каком-то условии) и в поле код вставляем подобный код

СпойлерПоказать

Код: Выделить всё

<a href="#win1"><img title="" src="/img/icons/buttons/camera_on.png" alt="" /></a>
<!-- Модальное окно №1 -->
   <a href="#x" class="overlay" id="win1"></a>
   <div class="popup">
    <iframe src="http://stream.ntktv.ua/pysanka.html" height="290px"></iframe>
     
  <!--  <img src="http://192.168.1.33:8080/video">  -->
      <p style="font-size:25px;color:white;text-align:center;">
      Вебка из инета
      </p>
      <a class="close"title="Закрыть" href="#close"></a>
    </div>

не забываем подключить css стили, любым способом... сам css код в моем случае

СпойлерПоказать

Код: Выделить всё

/*________________________*/
/*  модальное окно*/
/*________________________*/

/* Базовые стили слоя затемнения и модального окна  */
.overlay {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 10;
    display: none;
/* фон затемнения */
    background-color: rgba(0, 0, 0, 0.65);
    position: fixed; /* фиксированное поцизионирование */
    cursor: default; /* тип курсара */
}
/* активируем слой затемнения */
.overlay:target {
    display: block;
}
/* стили модального окна */
.popup {
    top: -100%;
    right: 0;
    left: 50%;
    font-size: 14px;
     z-index: 20;
    margin: 0;
    width: 50%;
    min-width: 250px;
    max-width: 500px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
    position: fixed;
    padding: 15px;
    border: 1px solid #383838;
    background: #000;
/* скругление углов */
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
    font: 14px/18px 'Tahoma', Arial, sans-serif;
/* внешняя тень */
    -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -ms-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3);
    -webkit-transform: translate(-50%, -500%);
    -ms-transform: translate(-50%, -500%);
    -o-transform: translate(-50%, -500%);
    transform: translate(-50%, -500%);
    -webkit-transition: -webkit-transform 0.6s ease-out;
    -moz-transition: -moz-transform 0.6s ease-out;
    -o-transition: -o-transform 0.6s ease-out;
    transition: transform 0.6s ease-out;
}
/* активируем модальный блок */
.overlay:target+.popup {
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    -o-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    top: 20%;
}
/* формируем кнопку закрытия */
.close {
    top: -20px;
    right: -20px;
    width: 40px;
    height: 40px;
    position: absolute;
    padding: 0;
    border: 4px solid #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 20px;
    background-color: rgba(61, 61, 61, 0.8);
    -webkit-box-shadow: 0px 0px 10px #000;
    -moz-box-shadow: 0px 0px 10px #000;
    box-shadow: 0px 0px 10px #000;
    text-align: center;
    text-decoration: none;
    font: 25px/40px 'Tahoma', Arial, sans-serif;
    font-weight: bold;
    -webkit-transition: all ease .8s;
    -moz-transition: all ease .8s;
    -ms-transition: all ease .8s;
    -o-transition: all ease .8s;
    transition: all ease .8s;
}
.close:before {
    color: rgba(255, 255, 255, 0.9);
    content: "X";
    text-shadow: 0 -1px rgba(0, 0, 0, 0.9);
    font-size: 20px;
}
.close:hover {
    background-color: rgba(252, 20, 0, 0.8);
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    transform: rotate(360deg);    
}
/* изображения внутри окна */
.popup img {
    width: 100%;
    height: auto;
}
/* миниатюры слева/справа */
.pic-left, 
.pic-right {
    width: 25%;
    height: auto;
}
.pic-left {
    float: left;
    margin: 5px 15px 5px 0;
}
.pic-right {
    float: right;
    margin: 5px 0 5px 15px;
}
/* элементы м-медиа, фреймы */
.popup embed, 
.popup iframe {
    top: 0;
    right: 0;
    bottom: 0; 
    left: 0; 
    display:block;
    margin: auto;
    min-width: 320px;
    max-width: 600px;
    width: 100%;
}
.popup h2 { /* заголовок 2 */
    margin: 0;
    color: #008000;
    padding: 5px 0px 10px;
    text-align: left;
    text-shadow: 1px 1px 3px #adadad;
    font-weight: 500;
    font-size: 1.4em;
    font-family: 'Tahoma', Arial, sans-serif;
    line-height: 1.3;
}
/* параграфы */
.popup p {margin: 0; padding: 5px 0}

это всего лишь пример взятый в свое время с инета и чуть переработанный, но суть думаю понятна

*** Сообщение запрещено. Сообщение похоже на спам. ***

[max506]

это всего лишь пример взятый в свое время с инета и чуть переработанный, но суть думаю понятна

Суть понятна, пример работает при добавлении в качестве html-элемента на сцену.
Правда я не понял, почему окно закрывается, если кликнуть за его пределами, это совсем не модальность )))
Спрошу теперь с практической точки зрения. Мне требуется такое окно, чтобы в нем с помощью различных элементов интерфейса (поля ввода, switch, radio button, check box, select menu) устанавливать значения свойств объектов, причем свойства должны сохраняться или не сохраняться только при выходе из окна в соответствии с выбором пользователя.
Как-то тоскливо весь этот интерфейс ручками описывать в CSS
Может есть какие-нибудь генераторы, чтобы набросать элементы интерфейса и затем сгенерить код?