モーダルダイアログとは、「一度開いたダイアログボックスを閉じるまで、他の操作をできなくするタイプのダイアログボックス」の事を言います。
【CSS】
headタグ内にCSS定義を行います。
footer等の定義は省略します。
赤文字がモーダルダイアログになります。
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<style type="text/css">
/*** モーダルダイアログ用領域定義***/
.divModalDialog {
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
/*! important !*/
display:none;
/* last attribute set darkness on scale: 0...1.0 */
background-color:rgba(0,0,0,0.8);
text-align:center;
z-index:101;
}
/*** ! target attribute does the job ! ***/
.divModalDialog:target { display:block; }
/*** モーダルダイアログの内部定義 ***/
.divModalDialog div {
/* either absolute or fixed */
position:fixed;
top:5%;
width:100%;
height:80%;
/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index:102;
}
/*** モーダル内のh1定義 ***/
.divModalDialog div h1 {
width:100%;
font-size:2em;
color:#dadada;
z-index:103;
/* add shadows to text */
-moz-text-shadow: 10px 3px 4px 6px rgba(0,0,0,0.9);
-webkit-text-shadow: 3px 4px 6px rgba(0,0,0,0.9);
text-shadow: 10px 4px 6px rgba(0,0,0,0.9);
}
/*** モーダル内イメージ定義 ***/
.divModalDialog img {
padding:20px;
z-index:105;
border: solid 1px gray;
/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
background: -moz-linear-gradient(top, #dadada,
#505050 5%,
#bababa 50%,
#303030 50%,
#101010);
background: -webkit-gradient(linear, center top, center bottom,
from(#dadada),
color-stop(0.05, #505050),
color-stop(0.5, #bababa),
color-stop(0.5, #303030),
to(#101010));
}
/*** モーダル内リストのリンク(aタグ)定義 ***/
.divModalDialog ul a {
padding:5px;
font-size:3em;
font-weight:bold;
color:Yellow;
text-decoration:none;
border: solid 1px Gray;
/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
z-index:110;
}
/*** メインのDIV用領域 ***/
#divThumbnails {
position:relative;
margin: 75px 0 0 0;
height:250px;
padding-top:30px;
background-color:#cacaca;
/* add shadows */
-moz-box-shadow: 5px 5px 10px rgba(50,50,50,0.7);
-webkit-box-shadow: 5px 5px 10px rgba(50,50,50,0.7);
box-shadow: 5px 5px 10px rgba(50,50,50,0.7);
/* gradient effect with color-stop */
background: -moz-linear-gradient(top, #f0f0f0,
#bababa 10%,
#cacaca 49%,
#909090 50%,
#cacaca 50%,
#cacaca 90%,
#ababab);
background: -webkit-gradient(linear, center top, center bottom,
from(#f0f0f0),
color-stop(0.1, #bababa ),
color-stop(0.49, #cacaca),
color-stop(0.50, #909090),
color-stop(0.50, #cacaca),
color-stop(0.90, #cacaca),
to(#ababab));
}
/*** メインのDIV用領域のイメージスタイル ***/
#divThumbnails img {
padding:10px;
height:200px;
max-width:300px;
border: solid 1px gray;
/* rounded corners */
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
/* add shadows */
-moz-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
-webkit-box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
box-shadow: 5px 5px 10px rgba(0,0,0,0.5);
z-index:1;
}
/*** イメージ及びリスト内aタグのマウスオーバー定義 ***/
#divThumbnails img:hover, .divModalDialog ul a:hover
{
background:#505050;
background: -moz-linear-gradient(top, #eaeaea,
#505050 50%,
#303030 50%,
#404040);
background: -webkit-gradient(linear, left top, left bottom,
from(#eaeaea),
color-stop(0.5, #505050),
color-stop(0.5, #303030),
to(#404040));
}
/*** fancy text effect: 180 degree ***/
#divUpsideDown {
position: relative;
margin-top:5%;
width:100%;
ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"; /*
-moz-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
font-size:3em;
font-weight:bold;
color:Maroon;
/* add shadows to text */
-moz-text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
-webkit-text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
text-shadow: 3px 3px 5px rgba(250,250,210,0.9);
}
</style>
</head>
【HTML】
bodyタグ内にクリックしたら、ダイアログを表示するようにコード記載します。
一個目のリスト画像をクリックしたらID=divModealDialog1に飛び、ダイアログが表示されます。
二個目のリスト画像をクリックしたらID=divModealDialog2に飛び、ダイアログが表示されます。
<body>
<div id="header">
<h2>モーダルポップアップダイアログをJavaScriptなしで、HTML5+CSS3で作成</h2>
</div>
<!-- NAV THUMBNAILS -->
<div id="divThumbnails">
<ul>
<li><a href="#divModalDialog1"><img>
src="http://webinfocentral.com/html5/Travolta.JPG"
alt="みつお治療院" /></img></a></li>
<li><a href="#divModalDialog2"><img>
src="http://webinfocentral.com/html5/TitanicEffortsNY.JPG"
alt="My ブログ" /></img></a></li>
</ul>
</div>
<div id="divUpsideDown">画像クリックで、モーダルダイアログが表示します</div>
<!--1st LINK -->
<div id="divModalDialog1" class="divModalDialog">
<div>
<h1>Yahoo! Japan</h1>
<ul>
<li><a href="#">閉じる</a></li> <!--閉じる-->
<li><a href="http://www.yahoo.co.jp/">サイト移動</a></li> <!--外部リンク-->
</ul>
<img src="http://k.yimg.jp/images/top/sp2/cmn/logo-ns-131205.png" alt="Yahoo! Japan" />
</div>
</div>
<div id="divModalDialog2" class="divModalDialog"><div>
<h1>TAの欝な日々</h1>
<ul>
<li><a href="#">閉じる</a></li> <!--閉じる-->
<li><a href="http://tasano2525.blogspot.jp/">サイト移動</a></li> <!--外部リンク-->
</ul>
<img src="http://www.google.com/images/icons/ui/gprofile_button-16.png" alt="g++ Blog" />
</div></div>
<div id="footer">
Copyrightc 2014 TAの欝な日々 | Author: T.Asano |
<a href="http://tasano2525.blogspot.jp/" target="_blank">HOME</a> |
</div>
</body>
【実装】
【参考URL】
http://www.codeproject.com/Tips/170049/Pure-HTML-CSS-Modal-Dialog-Box-no-JavaScript
0 件のコメント:
コメントを投稿