info navigation

phpbb-belk.ru

темы, связанные с форумом phpbb 3.0.x



Новая тема  [ 1 сообщение ]  Просмотры: 142

Автор Сообщение
Не в сети
(Андрей)  
Администратор
Аватара пользователя

Стаж: 9 лет 1 месяц 14 дней
Сообщения: 1233
Откуда: здешние мы


Стиль: subsilver2


Репутация: 11


Russia

Тиц и PR

перейти на сайт пользователя
Найти темы пользователя


Скрипт открытия блоков. Часть 2

информация взята здесь: https://www.cyberforum.ru/html/thread1743027.html

CSS+ Java Script

выглядит так:

посмотреть демо

код сего действа:

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

<!DOCTYPE HTML>
<html><head>
<title>DIVное окно!</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
<style type="text/css">
    #divWin {
        position:absolute;
        width:300px;
        height:200px;
        border:3px solid green;
        background:yellow;
        visibility:hidden;
        padding:20px;
        text-align:center;
    }
    #divWin div div{
        float: left;
    }
    #closetButton {
        position:absolute;
        top:0;
        right:0;
        border-bottom:3px solid green;
        border-left:3px solid green;
        font-weight:bold;
        cursor:pointer;
        padding:2px 4px
    }
    p{
        cursor:pointer;
    }
</style>
 
<script type="text/javascript">
    function winOpen(){
        var obj=document.getElementById("divWin").style;
        obj.visibility="visible";
        winOpen2(20, 0, obj); <!--вместо 20 было 3-->
    };
     
    function winOpen2(s, o, obj){//показываем окно
        o+=s;
        if(o<100){
            <!--obj.opacity=o/100;
            <!--obj.filter='alpha(opacity='+o+')';-->
            setTimeout(function(){
                    winOpen2(s, o, obj);
                }, 5); <!--было 55-->
            }
        else{//показать полностью
            obj.opacity=1;
            obj.filter='alpha(opacity=100)';
        };
    };
     
    function winCloset(){
        winCloset2(5, 10, document.getElementById("divWin").style);<!--вместо 10 было 100-->
    };
     
    function winCloset2(s, o, obj){//скрываем окно
        o-=s;
        if(o>0){
            obj.opacity=o/100;
            obj.filter='alpha(opacity='+o+')';
            setTimeout(function(){
                    winCloset2(s, o, obj);
                }, 5);<!--было 55-->
        }
        else{//обнуляем на выходе
            obj.opacity=0;
            obj.filter='alpha(opacity=0)';
            obj.visibility="hidden";
        };
    };
</script>
</head>
 
<body>
    <a href="#" onclick="winOpen();">Войти</a>
    <br><br>
   
    <div id="divWin"> Здесь помещается содержимое <div id="closetButton" onclick="winCloset();">Х</div> </div>
 </body>
</html>



****************************

Второй открывающийся блок (с красивостями) на чистом CSS:

информация взята здесь: https://www.cyberforum.ru/html/thread1743027.html

посмотреть демо:

Вызвать окно

скачать демо: https://phpbb-belk.ru/download/demo/blok-css.html

код сей красивости:

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

<style>
.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: 85%;
    min-width: 320px;
    max-width: 600px;
    position: fixed;
    padding: 15px;
    border: 1px solid #383838;
    background: #fefefe;
    -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: -10px;
    right: -10px;
    width: 20px;
    height: 20px;
    position: absolute;
    padding: 0;
    border: 2px solid #ccc;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    -ms-border-radius: 15px;
    -o-border-radius: 15px;
    border-radius: 15px;
    background-color: #000;
    -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: 13px/20px '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: 12px;
}

</style>

<a href="#win1" class="button button-green">Вызвать окно</a>
<a href="#x" class="overlay" id="win1"></a>
<div class="popup">
 А вот и окошко!
 <a class="close"title="Закрыть" href="#close"></a>
</div>


трёхголовый белк семейства рептилоидов:
"три головы - хорошо, на как же трудно придти к согласию..."
открыть блок,css,div,javascript
Показать сообщения за:  Поле сортировки  
Ответить на тему  [ 1 сообщение ] 

Кто сейчас на сайте:

Всего посетителей: 1, из них зарегистрированных: 0, скрытых: 0 и гостей: 1 (основано на активности пользователей за последние 5 минут)
Больше всего посетителей (122) здесь было 19 дек 2023, 12:10

Сейчас этот раздел просматривают: нет зарегистрированных пользователей и гости: 1



Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете добавлять вложения
Вы можете защищать свои темы паролем

Найти:
Перейти:  




cron

Текущее время: 06 ноя 2024, 03:24

Создано на основе phpBB® Forum Software © phpBB Group
Яндекс.Метрика

Полная версия Мобильный вид