文字の画像(イメージ)化
cman.jp cman.jp > パーツ作成メニュー > ページ全体のデザイン > モーダルウインドウ

CSSでモーダルウインドウ・ポップアップ

以前はhtmlでモーダルウインドウ・ポップアップを実現することが出来ましたが、現在のhtmlのみではモーダルウインドウやポップアップは実現できなくなっています。

サンプルは、画面全体をdivで覆うここで、元の画面を操作できない仕組みとしています。モーダルウインドウに別URLを使用する場合は、ifreameやAjaxを使用する必要があります。
別ウインドウを開く場合は、以下のページを参考ください。
JavaScriptでウインドウを開く

サンプルは、モーダルウインドウ・ポップアップの表示方法「フェードイン/フェードアウト」「上下」「左右」や表示速度もも指定可能です。
CSSだけでは複雑となるため、簡単なJavaScriptも使用しています。

いろいろなモーダルウインドウ・ポップアップを試してみよう!

モーダルウインドウ・ポップアップエリアのhtmlはどこに指定しても利用いただけます。

モーダルウインドウを開くときの動き
モーダルウインドウを閉じるときの動き
背景の色
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
他▶
透明度
開く・閉じるの動きの時間(速度)
使用したhtml
<!-- 開くボタン -->
<input type="button" value="モーダルウインドウを開く" onclick="modalOpen()">
<!-- モーダルウインドウのエリア -->
<div id="modalArea" class="modalNoDisp">
  <div class="modalWindow"> <!-- ここがウインドウとなります -->
    <p>モーダルウインドウ</p>
    <p>xxx入力<br><input type="text" value="" style="width:200px"></p>
    <p><input type="button" value="閉じる" onclick="modalClose()"></p>
  </div>
</div>
生成したCSS
<style type="text/css">
/* === モーダル非表示(初期) ============================== */
.modalNoDisp {
  display : none;
}
/* === モーダルバックグランド ============================== */
.modalBg {
  position   : fixed;
  overflow   : hidden;
  top        : 0;
  right      : 0;
  bottom     : 0;
  left       : 0;
  background : radial-gradient(circle at 50% 50%,
                               rgba(0, 0, 0, 0.90),
                               rgba(0, 0, 0, 0.70));
  z-index    : 10;
}
/* === モーダルバックグランド:OPEN時のアニメーション ====== */
.modalBgOpen {
  animation  : bgOpenAnime 0.3s ease;
}
@keyframes bgOpenAnime {                     /* フェードイン */
   0% { opacity: 0 }
 100% { opacity: 1 }
}
/* === モーダルバックグランド:CLOSE時のアニメーション ===== */
.modalBgClose {
  bottom     : 100%;
  animation  : bgCloseAnime 0.3s ease;
}
@keyframes bgCloseAnime {                     /* フェードイン */
   0% { opacity: 1; bottom: 0 }
 100% { opacity: 0; bottom: 0 }
}
/* === モーダルウインド ==================================== */
.modalBg .modalWindow {
                             /* モーダルウインドを中心に表示 */
  position      : absolute;
  top           : 50%;
  left          : 50%;
  transform     : translate(-50%, -50%);
  z-index       : 11;
           /* ↓モーダルウインドウの見た目:変更してください */
  width         : 300px;
  min-height    : 220px;
  background    : #fff;
  border        : 3px solid #35557f;
  border-radius : 10px;
  font-size     : 16pt;
  text-align    : center;
}
/* === モーダルウインド:OPEN時のアニメーション============= */
.modalBgOpen .modalWindow {
  animation     : modalOpenAnime 0.3s ease;
}
@keyframes modalOpenAnime {                      /* 上→中心 */
   0% { top : -50% }
 100% { top : 50%  }
}
/* === モーダルウインド:CLOSE時のアニメーション============ */
.modalBgClose .modalWindow {
  animation     : modalCloseAnime 0.3s ease;
}
@keyframes modalCloseAnime {                      /* 中心→下 */
   0% { top : 50%  }
 100% { top : 150% }
}
</style>
生成したJavaScript
<script type="text/javascript">
function modalOpen(){
 //------------------------------------------------------------
 //  モーダルウインドウ オープン
 //------------------------------------------------------------
  document.getElementById("modalArea").className = "modalBg modalBgOpen";
}
function modalClose(){
 //------------------------------------------------------------
 //  モーダルウインドウ クローズ
 //------------------------------------------------------------
  document.getElementById("modalArea").className = "modalBg modalBgClose";
}</script>
ページTOP
広告
広告

注意事項

モーダルウインドウエリア・ポップアップエリアは、htmlの任意の場所(好きな場所)に記述出来ます。一般的には「</body>」直前に記述します。

広告

生成できるホームページ・パーツ一覧
ご利用時の注意事項・制約事項
よくあるご質問
何で無料なの?
生成コードに利用制限はある?
生成コードに保証はある?
jQueryで生成できない?

広告
ページTOP

当サイト内の関連するページ

広告
QrCode
このページのURL
スマートフォン・タブレット
運営:株式会社シーマン