Модальное окно CSS + немного JS

Delat · August 6, 2013

Почему не работает? А здесь работает.


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="keywords" content="">
<link rel="stylesheet" href="css.css">
<script type="javascript">
p = $('.popup__overlay')
$('#popup__toggle').click(function() {
p.css('display', 'block')
})
p.click(function(event) {
e = event || window.event
if (e.target == this) {
	 $(p).css('display', 'none')
}
})
$('.popup__close').click(function() {
p.css('display', 'none')
})</script>
</head>

<body>
<p><input type="button" value="Popup!" id="popup__toggle" /></p>
<div class="popup__overlay">
<div class="popup">
	 <a href="#" class="popup__close">X</a>
	 <h2>Welcome!</h2>
	 <p>Please enter your login and password to continue</p>
	 <div class="popup-form__row">
		 <label for="popup-form_login">Login</label>
		 <input type="text" id="popup-form_login" value="" />
	 </div>
	 <div class="popup-form__row">
		 <label for="popup-form_password">Password</label>
		 <input type="password" id="popup-form_password" value="" />
	 </div>
	 <input type="button" value="Log in" />
</div>
</div>
</body>

</html>


html {
min-height: 100%
}
body {
min-height: 100%;
background: #fff;
font: 14px/125% Tahoma;
}
p {
margin: 1em 0;
text-align: center
}
.popup__overlay {
display: none;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,.7);
text-align: center
}
.popup__overlay:after {
	 display: inline-block;
	 height: 100%;
	 width: 0;
	 vertical-align: middle;
	 content: ''
}
.popup {
display: inline-block;
position: relative;
max-width: 80%;
padding: 20px;
border: 5px solid #fff;
border-radius: 15px;
box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4);
background: #fff;
vertical-align: middle
}
.popup-form__row {
margin: 1em 0
}
label {
display: inline-block;
width: 120px;
text-align: left
}
input[type="text"], input[type="password"] {
margin: 0;
padding: 2px;
border: 1px solid;
border-color: #999 #ccc #ccc;
border-radius: 2px
}
input[type="button"] {
padding: 6px 16px;
border: 0;
border-radius: 2px;
-webkit-box-shadow: inset 0 1px 1px rgba(255,255,255,.3);
box-shadow:		 inset 0 1px 1px rgba(255,255,255,.3);
cursor: pointer;
background: #444;
background: -webkit-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
background: -moz-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
background:	 -ms-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
background:	 -o-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
background:		 linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
color: #fff
}
.popup__close {
display: block;
position: absolute;
top: -20px;
right: 10px;
width: 12px;
height: 12px;
padding: 8px;
border: 5px solid #fff;
border-radius: 50%;
-webkit-box-shadow: inset 0 2px 2px 2px rgba(0,0,0,.4),
							 0 3px 3px	 rgba(0,0,0,.4);
box-shadow:		 inset 0 2px 2px 2px rgba(0,0,0,.4),
							 0 3px 3px	 rgba(0,0,0,.4);
cursor: pointer;
background: #fff;
text-align: center;
font-size: 12px;
line-height: 12px;
color: #444;
text-decoration: none;
font-weight: bold
}
.popup__close:hover {
	 background: #ddd
	 }

wwt · August 6, 2013


$(window).ready(function(){
//сюда js код
});

PS У фиддла это уже прописано, но можно отключить в меню слева в выпадающем списке no wrap если выбрать

Edited August 6, 2013 by wwt

Delat · August 6, 2013


$(window).ready(function(){
//сюда js код
});

сделал, но все равно нет модального окна


<script type="javascript">
$(window).ready(function(){
p = $('.popup__overlay')
$('#popup__toggle').click(function() {
    p.css('display', 'block')
})
p.click(function(event) {
    e = event || window.event
    if (e.target == this) {
	    $(p).css('display', 'none')
    }
})
$('.popup__close').click(function() {
    p.css('display', 'none')
})
});
</script>

wwt · August 6, 2013

Библиотеку jQuery подключили? Судя по html коду нет ))

Edited August 6, 2013 by wwt

Delat · August 6, 2013

Библиотеку jQuery подключили? Судя по html коду нет ))

извините, не увидел. Сейчас добавил вот такую строчку, повыше основного js-кода:


https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

но по прежнему ничего нет


<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script type="javascript">
    $(window).ready(function(){
    p = $('.popup__overlay')
$('#popup__toggle').click(function() {
    p.css('display', 'block')
})
p.click(function(event) {
    e = event || window.event
    if (e.target == this) {
	    $(p).css('display', 'none')
    }
})
$('.popup__close').click(function() {
    p.css('display', 'none')
})
});
</script>

Delat · August 6, 2013

никто не поможет? ???

npofopr · August 6, 2013

Смотрите в консоли, явно ведь ошибки какие то есть.

Delat · August 7, 2013

Смотрите в консоли, явно ведь ошибки какие то есть.

не, нет ошибок, кроме трех строк на


background: -webkit-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);

    background:	 -ms-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);
    background:	  -o-linear-gradient(90deg, #515151, #333 48%, #333 52%, #515151 100%);

Sign In

Модальное окно CSS + немного JS

Question

Delat

Link to comment

Share on other sites

7 answers to this question

Recommended Posts

wwt

Link to comment

Share on other sites

Delat

Link to comment

Share on other sites

wwt

Link to comment

Share on other sites

Delat

Link to comment

Share on other sites

Delat

Link to comment

Share on other sites

npofopr

Link to comment

Share on other sites

Delat

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information