Сообщение # 1 | 18:24:54
Сижу на своем сайте, делаю шаблон...
Жму F12... И срезу после <body> идет скрытый див... Решил посмотреть что за блок, потому что класс неизвестный у него был,, да еще и скрытый...
Так оказывается модальное окно не много в стиле бутстрап...

Вот код:

Код
<div id="wbbmodal" style=" display: none; "><div class="wbbm"><div class="wbbm-title"><span class="wbbm-title-text"></span><span class="wbbclose" title="Закрыть">×</span></div><div class="wbbm-content"></div><div class="wbbm-bottom"><button id="wbbm-submit" class="wbb-button">Сохранить</button><button id="wbbm-cancel" class="wbb-cancel-button">Отмена</button><button id="wbbm-remove" class="wbb-remove-button">Удалить</button></div></div></div>


И скриншот

Добавлено (05 Июн 2015, 18:24:54)
---------------------------------------------
CSS Модального окна:

Код
/* MODAL WINDOW */
#wbbmodal {
     font: 12px/1.2 Arial,Verdana;
     position: fixed;
     text-align:center;
     bottom: 0;
     left: 0;
     top: 0;
     right: 0;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     background: rgba(255,255,255,0.7);
     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#7Fffffff,endColorstr=#7Fffffff);
     zoom: 1;
     z-index: 11005;
}

#wbbmodal .wbbm{
     background: #fff;
     text-align:left;
     min-width: 400px;
     max-width: 800px;
     min-height:200px;
     max-height:800px;
     margin: 50px auto;
     border: 1px solid #bbb;
     box-shadow:0px 0px 10px #999;
}
#wbbmodal .wbbm-title{
     color:#333;
     position:relative;
     padding:5px 10px;
     border-bottom:1px solid #ccc;
}
#wbbmodal .wbbm-title .wbbm-title-text{
     font-size:1.6em;
     line-height:2em;
     margin:0;
     padding:0;
}
#wbbmodal .wbbm-title .wbbclose{
     display:block;
     text-transform:uppercase;
     position:absolute;
     right:15px;
     top:15px;
     font-size:21px;
     font-weight:bold;
     cursor:pointer;
     color:#888;
}
#wbbmodal .wbbm-title .wbbclose:hover{
     color:red;
}
#wbbmodal .wbbm-content{}
#wbbmodal .wbbm .wbbm-tablist{
     width:160px;
     float:left;
     padding: 20px 5px;
}
#wbbmodal .wbbm .wbbm-tablist ul{
     list-style-type:none;
     padding:0;
     margin:0;
}
#wbbmodal .wbbm .wbbm-tablist ul li{
     height:14px;
     padding:10px 10px 10px 20px;
     cursor:pointer;
     margin: 5px 0;
     position:relative;
     border-radius: 3px;
}
#wbbmodal .wbbm .wbbm-tablist ul li.on, #wbbmodal .wbbm .wbbm-tablist ul li.on:hover{
     background:#666;
     color:#fff;
     cursor:default;
}
#wbbmodal .wbbm .wbbm-tablist ul li:hover{
     background:#eee;
}

#wbbmodal .wbbm-cont{
     padding:20px;
     min-height:100px;
}
#wbbmodal .wbbm-content{
     min-height:100px;
}
#wbbmodal .hastabs .wbbm-bottom,#wbbmodal .hastabs .wbbm-cont {
     margin-left:170px;  
     border-left:1px solid #ccc;
}
#wbbmodal .wbbm-bottom{
     border-top:1px solid #ccc;
     padding:10px;
     background:#f1f1f1;
}
#wbbmodal button{
     display:inline-block;*display:inline;zoom: 1;
     font-size:0.9em;
     font-weight:bold;
}
#wbbmodal .wbb-button{
     background:#0055e4;
     background-image: linear-gradient(bottom, #0054e4 50%, #005fff 67%);
     background-image: -o-linear-gradient(bottom, #0054e4 50%, #005fff 67%);
     background-image: -moz-linear-gradient(bottom, #0054e4 50%, #005fff 67%);
     background-image: -webkit-linear-gradient(bottom, #0054e4 50%, #005fff 67%);
     background-image: -ms-linear-gradient(bottom, #0054e4 50%, #005fff 67%);
     color:#fff;
     line-height:26px;
     border:1px solid #0055e4;
     border-radius:3px;
     padding:2px 10px;
     cursor:pointer;
}
#wbbmodal .wbb-button:hover{
     background:#005fff;
     border:1px solid #0049C4;
}
#wbbmodal .wbb-cancel-button{
     background:#f5f5f5;
     color:#333;
     line-height:26px;
     border:1px solid #ddd;
     border-radius:3px;
     padding:2px 10px;
     cursor:pointer;
     margin-left:15px;
}
#wbbmodal .wbb-cancel-button:hover{
     background:#fff;
     border:1px solid #ccc;
}
#wbbmodal .wbb-remove-button{
     background:#db0000;
     color:#fff;
     line-height:26px;
     border:1px solid #ca0000;
     border-radius:3px;
     padding:2px 10px;
     cursor:pointer;
     float:right;
}
#wbbmodal .wbb-remove-button:hover{
     background:#f80000;
     border:1px solid #be0000;
}

#wbbmodal .wbbm-inp-row{
     margin-bottom:15px;
}
#wbbmodal .wbbm-inp-row label{
     display:block;
     font-weight:bold;
     margin-bottom:3px;
}
#wbbmodal .wbbm-inp-row input{
     height:26px;
     padding:0px 3px;
     line-height:24px;
     font-size:12px;
     width:100%;
     border:1px solid #aaa;
     outline:none;
     box-sizing:border-box;
}

#wbbmodal .wbbm-inperr{
     color:red;
     font-size:10px;
     display:block;
}
#wbbmodal .wbbm-brdred{
     border-color:red !important;
}
Прикрепления: 6884811.png (32.5 Kb)

Сообщение отредактировал FreeZon - Пятница, 05 Июн 2015, 18:23:45