Всплывающее окно на JQuery
В редакторе
Всплывающее окно на JQuery
Brain_Script
1745
2020-02-07 08:06:34
<script type="text/javascript" src="/js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<a class="show_popup" rel="info" href="#">Всплывашка</a>
<div class="popup info">
<a class="close" href="#">Close</a>
<!--здесь что угодно-->
</div>
<a class="close" href="#">Close</a>
#overlay {
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
display:none;
background:#000;
opacity:.8;
}
.popup {
padding:5px 15px 15px;
position:fixed;
top:100px;
left:50%;
display:none;
overflow:hidden;
border:1px solid #ccc;
background:#fff;
-moz-border-radius:15px;
-webkit-border-radius:15px;
border-radius:15px;
z-index:100;
behavior: url(PIE.htc);
}
.popup a.close {
width:16px;
height:16px;
display:block;
text-indent:-9999px;
position:absolute;
top:10px;
right:10px;
background:url(../images/close.png) no-repeat;}
<script type="text/javascript">
$(function () {
//script for popups
$('a.show_popup').click(function () {
$('div.'+$(this).attr("rel")).fadeIn(500);
$("body").append("<div id='overlay'></div>");
$('#overlay').show().css({'filter' : 'alpha(opacity=80)'});
return false;
});
$('a.close').click(function () {
$(this).parent().fadeOut(100);
$('#overlay').remove('#overlay');
return false;
});
});
</script>
Войдите для добавления комментария.