Появление блока div при клике на ссылку

@resU · Регистрация: 18.10.2015

Author24 — интернет-сервис помощи студентам

Как мне сделать что при нажатии на ссылку появился небольшой блок div. Этот блок div можно закрыть только с помощью крестика.

@Alekzender · 23.05.2016, 17:20

этот див называется попап, работает он только при известном участии javascrip-а. Если лень самому верстать - можно использовать плагин типа лайтбокса

@mrtoxas · 23.05.2016, 17:45

Да можно и на чистом CSS сделать:
СSS:

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: 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;
}

HTML:

HTML5

<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>

@resU · 23.05.2016, 18:12 **[ТС]**

Я уже нашёл решение. Делюсь с вами:

HTML5

<!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>

@mrtoxas · 23.05.2016, 18:13

Зачем лишний раз использовать js, если можно обойтись без него?

@resU · 24.05.2016, 12:00 **[ТС]**

Tоесть можно сделать покороче код? А как? Интересно, просто...

@mrtoxas · 24.05.2016, 12:50

resU, я же выше дал код

@resU · 24.05.2016, 18:18 **[ТС]**

Да-да, это я просто вскользь глянул, не вдаваясь в подробности; тороплюсь, ДИПЛОМ делаю как-никак. В любом случае оба варианта лишними не будут... Спасибо

Появление блока div при клике на ссылку

Решение

Решение

@resU 3 / 3 / 1 Регистрация: 18.10.2015 Сообщений: 13
		1
	Появление блока div при клике на ссылку 23.05.2016, 16:23. Показов 15296. Ответов 7 Метки нет (Все метки) Как мне сделать что при нажатии на ссылку появился небольшой блок div. Этот блок div можно закрыть только с помощью крестика. Миниатюры 0

@Alekzender 37 / 37 / 23 Регистрация: 21.02.2014 Сообщений: 112
	23.05.2016, 17:20	2
	этот див называется попап, работает он только при известном участии javascrip-а. Если лень самому верстать - можно использовать плагин типа лайтбокса 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	23.05.2016, 18:13	5
	Зачем лишний раз использовать js, если можно обойтись без него? 0

@resU 3 / 3 / 1 Регистрация: 18.10.2015 Сообщений: 13
	24.05.2016, 12:00 [ТС]	6
	Tоесть можно сделать покороче код? А как? Интересно, просто... 0

@mrtoxas 3826 / 2676 / 1521 Регистрация: 12.07.2015 Сообщений: 6,672 Записей в блоге: 4
	24.05.2016, 12:50	7
	resU, я же выше дал код 0

@resU 3 / 3 / 1 Регистрация: 18.10.2015 Сообщений: 13
	24.05.2016, 18:18 [ТС]	8
	Да-да, это я просто вскользь глянул, не вдаваясь в подробности; тороплюсь, ДИПЛОМ делаю как-никак. В любом случае оба варианта лишними не будут... Спасибо 0

Опции темы