東京都立川市のWeb制作事務所KOSAERU（コサエル）
理想をカタチに！あなたのホームページをこさえます！

2016.02.23 2021.10.10

CSSのみでモーダルウィンドウを作ってみた！

KOSAERU WEB MEMO CSS モーダル

CSSのみでモーダルウィンドウを作ってみた！

CSSのみでモーダルウィンドウを作ってみた！

このブログのスマホ用テンプレートで採用してみたモーダルウィンドウ。
スマホではメニューや検索フォームを隠して、ファーストビューをすっきりさせたかったので採用してみました。
あと、今どきっぽくてカッコ良いかと思ったので。

▼モーダルウィンドウを開くボタンを任意の場所に書く

<a href="#modal">メニュー</a>/code>

1	<a href="#modal">メニュー</a>/code>

▼モーダルウィンドウの中身を任意の場所に書く

<div id="modal">
<div class="modal-content">
<div class="copy">
<div class="close_link"><a href="#"><i class="fa fa-times"></i>;&amp;nbsp;CLOSE</a></div>
<?php get_search_form(); ?>
<div class="modal_menu"><h3>- CATEGORY -</h3><?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?></div>
</div>
</div>
<div class="overlay"></div>
</div>

1

2

3

4

5

6

7

8

9

10

<div id="modal">

<div class="modal-content">

<div class="copy">

<div class="close_link"><a href="#"><i class="fa fa-times"></i>;&nbsp;CLOSE</a></div>

<?php get_search_form(); ?>

<div class="modal_menu"><h3>- CATEGORY -</h3><?php wp_nav_menu( array ( 'theme_location' => 'header-navi' ) ); ?></div>

</div>

</div>

<div class="overlay"></div>

</div>

▼CSSに以下のものを書いたら出来上がり♪

#modal {
  left: 40%;
  margin: -250px 0 0 -32%;
  opacity: 0;
  position: absolute;
  top: -50%;
  visibility: hidden;
  width: 80%;
}

#modal:target {
  opacity: 1;
  top: 50%;
  visibility: visible
}

#modal .copy {
  padding: 10px;
  color: #fff
}

.modal-content {
  position: relative;
  z-index: 20;
  color: #fff
}

#modal .copy {
	padding-top:100px;
}

#modal .overlay {
  background-color: #000;
  background: rgba(0,0,0,.85);
  height: 100%;
  left: 0;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10
}

.copy a{
	font-family:'Oswald',sans-serif;
	font-weight:700;
	font-size:20px;
	text-align:center;
}
.copy .close_link a {
  color: #fff;
  text-decoration: none;
  display: inline-block;
  padding:10px;
  border-radius: 5px;
  background-color: #E74C3C;
  width:100%;
}
.copy .modal_menu{
	margin-top: 40px;
    display: inline-block;
    width: 100%;
	}
.copy h3{
	font-family:'Oswald',sans-serif;
	font-weight:700;
	font-size:28px;
	color:#E74C3C;
	text-align:center;
	margin-bottom:15px;}

.copy .modal_menu a{
	color:#fff;
	float:left;
	width:50%;
	margin:10px 0;
	font-size:24px;
}
#modal #s {
    padding: 4%;
    width: 96%;
}

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

#modal {

left: 40%;

margin: -250px 0 0 -32%;

opacity: 0;

position: absolute;

top: -50%;

visibility: hidden;

width: 80%;

}

#modal:target {

opacity: 1;

top: 50%;

visibility: visible

}

#modal .copy {

padding: 10px;

color: #fff

}

.modal-content {

position: relative;

z-index: 20;

color: #fff

}

#modal .copy {

padding-top:100px;

}

#modal .overlay {

background-color: #000;

background: rgba(0,0,0,.85);

height: 100%;

left: 0;

position: fixed;

top: 0;

width: 100%;

z-index: 10

}

.copy a{

font-family:'Oswald',sans-serif;

font-weight:700;

font-size:20px;

text-align:center;

}

.copy .close_link a {

color: #fff;

text-decoration: none;

display: inline-block;

padding:10px;

border-radius: 5px;

background-color: #E74C3C;

width:100%;

}

.copy .modal_menu{

margin-top: 40px;

display: inline-block;

width: 100%;

}

.copy h3{

font-family:'Oswald',sans-serif;

font-weight:700;

font-size:28px;

color:#E74C3C;

text-align:center;

margin-bottom:15px;}

.copy .modal_menu a{

color:#fff;

float:left;

width:50%;

margin:10px 0;

font-size:24px;

}

#modal #s {

padding: 4%;

width: 96%;

}

参考サイト：Minimal Pure CSS Responsive Modal Box – modalcss
http://www.cssscript.com/minimal-pure-css-responsive-modal-box-modalcss/

WEB MEMO CSS モーダル

関連するタグの記事

CSSだけで結構使えるシンプルアイコンが書けるサイト

2016.10.18 2021.10.10

https://www.youtube.com/watch?v=ZOiRwXOIsx4&feature=youtu.be https://twitter.com/webcreatorbox/status/788175303835262976 ▼CSS ICON -- …

CSS 特定の画像だけを操作する

CSS 特定の画像だけを操作する

2017.09.07 2023.06.22

ME CSSで特定の画像を消すか、サイズ調整したいと思った時に詰まったもんでメモ。ようはCSSの属性セレクタを利用することで、以下のようなことがピンポイントでイジることができた。【例】こんなことできます ('ω')b 特定のGIF画像…

横からスライドしてくるドロワーメニューが超簡単につくれる『Drawer』

横からスライドしてくるドロワーメニューが超簡単につくれる『Drawer』

2018.02.11 2021.10.10

最近のサイト制作において、特にスマホサイトからのアクセス数を意識している方からのオーダーとしてドロワーメニューを採用して欲しいというリクエストが多い。方法は色々あるが、最近よく使っているのが『Drawer』。理由は簡単！設置とカスタマイズが簡単だからだ。あと動きもスマ…

CSS テーブルの列幅を均等にする

CSS テーブルの列幅を均等にする

2016.05.16 2021.10.10

CSSでテーブルのセルの幅を均等にする方法。 table-layout:fixed; を利用する。 [crayon-66236bc06db23267348253/]

CSS｜テキストが表示領域を超えている時に途中でテキストを切って「・・・」を表示させる方法

CSS｜テキストが表示領域を超えている時に途中でテキストを切って「・・・」を表示させる方法

2016.02.29 2021.10.10

省略可能なテキストを省略して「・・・」を表示させます。デザイン的に整列して表示させたい時なんかに便利 ▼基本 [crayon-66236bc06db8a230586172/] ▼例：以下のようなことがでけました。 …

CSSで作る押したった感のあるボタン風リンク

CSSで作る押したった感のあるボタン風リンク

2021.01.24 2023.06.22

GIRL リンクをテキストリンクではなくボタン風にしたい！ GIRL それだけでなくボタンを押したような動きが欲しい！ ME そんな時はCSS使えば、押した時（クリックした時）にポチって沈むような動きを…

関連するカテゴリの記事

横からスライドしてくるドロワーメニューが超簡単につくれる『Drawer』

横からスライドしてくるドロワーメニューが超簡単につくれる『Drawer』

2018.02.11 2021.10.10

最近のサイト制作において、特にスマホサイトからのアクセス数を意識している方からのオーダーとしてドロワーメニューを採用して欲しいというリクエストが多い。方法は色々あるが、最近よく使っているのが『Drawer』。理由は簡単！設置とカスタマイズが簡単だからだ。あと動きもスマ…

WordPress […] を消す

WordPress […] を消す

2016.02.23 2021.10.10

▼functions.phpに以下のコードを追加【出力】冒頭文 [crayon-66236bc070d44137294225/] 【2行目】「'」シングルクォーテーションの間に任意の文字を書くこともでける。【出力】冒頭文…続きを読む [crayo…

WordPress 投稿日時ではなく「●分前、●日前に投稿されました」とする

WordPress 投稿日時ではなく「●分前、●日前に投稿されました」とする

2016.02.19 2021.10.10

FRIEND 投稿日時をそのまま表示するんでなくて、Twitterみたいに「●●時間前に投稿されました」って表示させたい！ ME そんなYouに！以下のソースをコピペするだけで対応可能だYO!! １．functi…

WordPress｜投稿記事の公開日と最終更新日をSEO的にもユーザーにも優しく表示させる方法

WordPress｜投稿記事の公開日と最終更新日をSEO的にもユーザーにも優しく表示させる方法

2021.02.26 2021.10.11

WordPressで投稿記事の公開日を最終更新日を表示させる方法を記します。またSEO的にもベターな書き方なんかもご紹介します。公開日と最終更新日の表示 ME まず、なにも考えずに表示だけさせる場合のご紹介。テンプレート内に以下のよう書きます。 …

WordPress カテゴリ（ターム）にエリア・都道府県を一括登録する用のデータ

WordPress カテゴリ（ターム）にエリア・都道府県を一括登録する用のデータ

2021.08.12 2021.10.10

プラグイン「WP Taxonomy Import」を使って一括登録するためのデータ。並び替えはプラグイン「Category Order and Taxonomy Terms Order」を使う。エリア＆都道府県北海道$area01 北海道$area01 -> 北…

WordPress 任意のテンプレートを読み込む方法

WordPress 任意のテンプレートを読み込む方法

2015.12.04 2021.10.10

ME 複数のテンプレートに同じ共通パーツを利用する時には、共通テンプレートを用意して、それを読み込ませたほうが良いと思います。多くの人がヘッダー・フッターを共通パーツにしているように、他のものでも共通パーツ化すると便利になります。理由は以下の…