jquery+css 3によって実現されたクラシカルポップアップ層の効果例
本明細書の例は、jquery+css 3によって実現されるポップアップ層効果を説明する。皆さんに参考にしてあげます。具体的には以下の通りです。
起こり得る状況
1)一列にあります。対応するポップアップ層を順番にイジェクトします。
2)一つのポップアップ層しかありません。
3)順番に合わせずにランダムにポップアップしたレイヤー
jqueryポップアップ層は第一の状況を解決します。
参考資料
移動端の「CSS 3マルチアニメ枠」
jqueryを導入する
JSコードここで閉じるためのcss 3の効果が実現されます。
ここで述べたように、皆さんのjQueryプログラムの設計に役に立ちます。
起こり得る状況
1)一列にあります。対応するポップアップ層を順番にイジェクトします。
2)一つのポップアップ層しかありません。
3)順番に合わせずにランダムにポップアップしたレイヤー
jqueryポップアップ層は第一の状況を解決します。
参考資料
移動端の「CSS 3マルチアニメ枠」
jqueryを導入する
JSコードここで閉じるためのcss 3の効果が実現されます。
<script type="text/javascript">
var w,h,className;
function getSrceenWH(){
w = $(window).width();
h = $(window).height();
$('#dialogBg').width(w).height(h);
}
window.onresize = function(){
getSrceenWH();
}
$(window).resize();
$(function(){
getSrceenWH();
//
$('.solution_class a').click(function(){
className = $(this).attr('class');
$('#dialogBg').fadeIn(300);
$('#dialog').removeAttr('class').addClass('animated '+className+'').fadeIn();
});
//
$('.claseDialogBtn,#dialogBg').click(function(){
$('#dialogBg').fadeOut(300,function(){
$('#dialog').addClass('bounceOutUp').fadeOut();
});
});
});
</script>
HTML
<div id="dialogBg"></div>
<div id="dialog" class="animated">
<div class="dialogTop">
<a href="javascript:;" rel="external nofollow" class="claseDialogBtn"> </a>
</div>
</div>
css
/* */
.animated{
-webkit-animation-duration:1.4s;
animation-duration:1.4s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both
}
@-webkit-keyframes bounceIn{
0%{
opacity:0;
-webkit-transform:scale(.3);
transform:scale(.3)
}
50%{
opacity:1;
-webkit-transform:scale(1.05);
transform:scale(1.05)
}
70%{
-webkit-transform:scale(.9);
transform:scale(.9)
}
100%{
opacity:1;
-webkit-transform:scale(1);
transform:scale(1)
}
}
@keyframes bounceIn{
0%{
opacity:0;
-webkit-transform:scale(.3);
-ms-transform:scale(.3);
transform:scale(.3)
}
50%{
opacity:1;
-webkit-transform:scale(1.05);
-ms-transform:scale(1.05);
transform:scale(1.05)
}
70%{
-webkit-transform:scale(.9);
-ms-transform:scale(.9);
transform:scale(.9)
}
100%{
opacity:1;
-webkit-transform:scale(1);
-ms-transform:scale(1);
transform:scale(1)
}
}
.bounceIn{
-webkit-animation-name:bounceIn;
animation-name:bounceIn
}
@-webkit-keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
}
@keyframes bounceInDown {
0% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
60% {
opacity: 1;
-webkit-transform: translateY(30px);
-ms-transform: translateY(30px);
transform: translateY(30px);
}
80% {
-webkit-transform: translateY(-10px);
-ms-transform: translateY(-10px);
transform: translateY(-10px);
}
100% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
@keyframes bounceOutUp {
0% {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
}
20% {
opacity: 1;
-webkit-transform: translateY(20px);
-ms-transform: translateY(20px);
transform: translateY(20px);
}
100% {
opacity: 0;
-webkit-transform: translateY(-2000px);
-ms-transform: translateY(-2000px);
transform: translateY(-2000px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
@keyframes rollIn {
0% {
opacity: 0;
-webkit-transform: translateX(-100%) rotate(-120deg);
-ms-transform: translateX(-100%) rotate(-120deg);
transform: translateX(-100%) rotate(-120deg);
}
100% {
opacity: 1;
-webkit-transform: translateX(0px) rotate(0deg);
-ms-transform: translateX(0px) rotate(0deg);
transform: translateX(0px) rotate(0deg);
}
}
.rollIn {
-webkit-animation-name: rollIn;
animation-name: rollIn;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
@keyframes flipInX {
0% {
-webkit-transform: perspective(400px) rotateX(90deg);
-ms-transform: perspective(400px) rotateX(90deg);
transform: perspective(400px) rotateX(90deg);
opacity: 0;
}
40% {
-webkit-transform: perspective(400px) rotateX(-10deg);
-ms-transform: perspective(400px) rotateX(-10deg);
transform: perspective(400px) rotateX(-10deg);
}
70% {
-webkit-transform: perspective(400px) rotateX(10deg);
-ms-transform: perspective(400px) rotateX(10deg);
transform: perspective(400px) rotateX(10deg);
}
100% {
-webkit-transform: perspective(400px) rotateX(0deg);
-ms-transform: perspective(400px) rotateX(0deg);
transform: perspective(400px) rotateX(0deg);
opacity: 1;
}
}
.flipInX {
-webkit-backface-visibility: visible !important;
-ms-backface-visibility: visible !important;
backface-visibility: visible !important;
-webkit-animation-name: flipInX;
animation-name: flipInX;
}
/*------------------- -----------------------*/
/*------------------- -----------------------*/
#dialogBg {
width: 100%;
height: 100%;
background-color: #000000;
opacity: .8;
filter: alpha(opacity=60);
position: fixed;
top: 0;
left: 0;
z-index: 9999;
display: none;
}
#dialog {
width: 800px;
height: 600px;
margin: 0 auto;
display: none;
background-color: #ffffff;
position: fixed;
top: 50%;
left: 50%;
margin: -300px 0 0 -400px;
z-index: 10000;
border: 1px solid #ccc;
border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 3px 2px 4px rgba(0, 0, 0, 0.2);
}
.dialogTop {
width: 90%;
margin: 0 auto;
border-bottom: 1px dotted #ccc;
letter-spacing: 1px;
padding: 10px 0;
text-align: right;
}
.dialogIco {
width: 50px;
height: 50px;
position: absolute;
top: -25px;
left: 50%;
margin-left: -25px;
}
.editInfos {
padding: 15px 0;
}
.editInfos li {
width: 90%;
margin: 8px auto auto;
text-align: center;
}
.ipt {
border: 1px solid #ccc;
padding: 5px;
border-radius: 3px;
-webkit-border-radius: 3px;
box-shadow: 0 0 3px #ccc inset;
-webkit-box-shadow: 0 0 3px #ccc inset;
margin-left: 5px;
}
.ipt:focus {
outline: none;
border-color: #66afe9;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
}
.submitBtn{width:90px;height:30px;line-height:30px;font-family:" ","microsoft yahei";cursor:pointer;margin-top:10px;display:inline-block;border-radius:5px;-webkit-border-radius:5px;text-align:center;background-color:#428bca;color:#fff;box-shadow: 0 -3px 0 #2a6496 inset;-webkit-box-shadow: 0 -3px 0 #2a6496 inset;}
jQueryの関連内容について興味がある読者は、当駅のテーマを調べてもいいです。「jQuery常用プラグインと使い方のまとめ」、「jqueryにおけるAjax用法のまとめ」、「jQuery表の操作テクニックまとめ」、「jQueryドラッグ効果とテクニックのまとめ」、「jQuery拡張テクニックのまとめ」、「jQueryよくある経典効果のまとめ」、「jQueryアニメーションと特効用法のまとめ」および「jqueryセレクタの使い方のまとめ」ここで述べたように、皆さんのjQueryプログラムの設計に役に立ちます。