Membangun Jendela Modal Popup Menggunakan Plugin jQuery Reveal

() translation by (you can also view the original English article)

Hari ini kita akan menggunakan Jendela Modal Popup dari Orman dan membuatnya ulang dengan HTML dan CSS. Kita kemudian akan menggunakan plugin jQuery Reveal untuk memberikan fungsionalitas penuh. Kita bahkan akan mengambil langkah lebih jauh dan menambahkan beberapa Media Queries CSS3 untuk menyesuaikannya dengan penggunaan mobile. Mari kita gali!

[Ini] jendela modal kecil sederhana, sempurna mungkin untuk pesan konfirmasi kecil seperti yang terlihat di pratinjaunya. Dan tidak, tidak ada alasan untuk menggunakan Comic Sans. Orman Clark

Langkah 1: Basis HTML5

Kita akan memulai dengan membuat dokumen kosong menggunakan markup HTML5. Kita telah menautkan ke stylesheet kita dan ke HTML5 Shiv yang akan memungkinkan elemen HTML5 di-render dengan benar di IE. Yang penting, kita juga telah terhubung ke perpustakaan jQuery terbaru (dihosting oleh Google) di bagian bawah halaman kita untuk pemuatan halaman yang dioptimalkan.

Terakhir, Anda mungkin memperhatikan kita juga menyertakan baris lain di head kita; metatag viewport. Ini akan memungkinkan perangkat untuk menafsirkan halaman kita dengan benar terlepas dari ukuran layarnya. Jika Anda ingin mengetahui lebih lanjut tentang ini, pastikan untuk memeriksa Tip Cepat ini!


<!DOCTYPE html>
<html>
<head>

  <!--Meta tags-->
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

	<!--Title-->
	<title>Pop Up Modal Window</title>
		
	<!--Stylesheets-->
	<link rel="stylesheet" href="css/styles.css">

	<!--HTML5 Shiv-->
	<!--[if lt IE 9]>
			<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
</head>
<body>






	<!--jQuery-->
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

</body>
</html>

Langkah 2: Mengunduh Reveal

Sebelum kita mulai menambahkan markup dan gaya apa pun kita akan mengunduh plugin Reveal. Pergi ke http://www.zurb.com/playground/reveal-modal-plugin dan tekan 'Download the Reveal kit' di sebelah kanan halaman.

Buka paket file yang telah Anda unduh. Anda harus menyalin jquery.reveal.js ke root situs Anda, atau folder mana pun yang Anda inginkan. Saya membuat folder bernama "js", yang mana saya biasanya menyimpan sumber daya javascript saya. Selanjutnya kita perlu mereferensikan skrip kita, jadi salin berikut ini setelah skrip jQuery Anda, pastikan jalurnya benar.

1	<script src="js/jquery.reveal.js"></script>

Langkah 3: Membuat Tombol

Untuk tutorial ini, kita akan membuat tombol yang dapat diklik untuk mengaktifkan modal. Saya telah maju dan mengambil gaya tombol dari Simple Web Buttons gratis dari Orman.

1
2	<body>
3
4	<a href="#" id="button">Click me</a>

Sebelum kita pergi dan melemparkan beberapa gaya kita akan dengan cepat menambahkan reset untuk menghapus margin yang tidak diinginkan dll. dari browser. Kita juga menambahkan beberapa gaya untuk body, hanya font-family, latar belakang dan mengamankan ukuran font pada 100%.


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline;
}
html {
	font-size: 62.5%; 
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	text-decoration:none;
}


body {
	font-family:'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size:100%;

	background:#fff;
}

Untuk tombol tersebut, kita akan membuat gaya menggunakan beberapa gradien, box shadow, dan border-radius. Hal utama yang perlu Anda perhatikan di sini adalah penempatan.

Pertama-tama, kita memposisikan tombol secara absolut, terhadap body/browser. Menerapkan 50% ke kiri dan atas akan memposisikan sudut kiri atas pusat secara sempurna di layar. Selanjutnya kita perlu minus beberapa margin atas dan kiri. Untuk mengetahui apa yang kita butuhkan untuk mengurangi mereka, kita akan melihat tinggi dan lebar kita. Kita perlu setengah dari lebar 78 untuk mendapatkan 39, dan minus margin-left untuk itu. Lalu kita ambil 28/2 = 14 dan minus margin atas dengan itu. Jika Anda tidak yakin dengan apa yang terjadi di sini, itu adalah trik yang rapi untuk memusatkan secara vertikal dan horizontal sebuah item dalam CSS. Jika Anda ingin mengetahui lebih lanjut, lihat posting yang rapi ini di CSS Tricks.

Setelah melakukan ini, kita juga menambahkan efek hover yang bersifat opsional.


#button {
	width:78px;
	height:28px;

	background-image: -webkit-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -moz-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -o-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: -ms-linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	background-image: linear-gradient(top, rgb(254, 218, 113), rgb(254, 186, 72));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#feda71', EndColorStr='#feba48');

	border:1px solid #ca9336;

	-webkit-box-shadow:
		inset 0px 1px 0px #fee395,
		      0px 1px 1px rgba(0,0,0,.15);
	-moz-box-shadow:
		inset 0px 1px 0px #fee395,
		      0px 1px 1px rgba(0,0,0,.15);
	box-shadow:
		inset 0px 1px 0px #fee395,
		      0px 1px 1px rgba(0,0,0,.15);

	-webkit-border-radius:4px;
	-moz-border-radius:4px;
	border-radius:4px;

	font-size:13px;
	font-weight:bold;
	text-align:center;
	line-height:28px;

	color:#996633;
	text-shadow:0px 1px 0px rgba(255,255,255,.4);

	position:absolute;
	top:50%;
	left:50%;
	margin-top:-14px;
	margin-left:-39px;
}

#button:hover {
	background-image: -webkit-linear-gradient(top, rgb(254, 194, 82), rgb(254, 205, 97));
	background-image: -moz-linear-gradient(top, rgb(254, 194, 82), rgb(254, 205, 97));
	background-image: -o-linear-gradient(top, rgb(254, 194, 82), rgb(254, 205, 97));
	background-image: -ms-linear-gradient(top, rgb(254, 194, 82), rgb(254, 205, 97));
	background-image: linear-gradient(top, rgb(254, 194, 82), rgb(254, 205, 97));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#fec252', EndColorStr='#fecd61');

	-webkit-box-shadow:
		inset 0px 1px 0px #fed17e,
		      0px 1px 1px rgba(0,0,0,.1);
	-moz-box-shadow:
		inset 0px 1px 0px #fed17e,
		      0px 1px 1px rgba(0,0,0,.1);
	box-shadow:
		inset 0px 1px 0px #fed17e,
		      0px 1px 1px rgba(0,0,0,.1);
}

Langkah 4: Menciptakan Dasar dari Modal

Selanjutnya kita akan menambahkan beberapa markup yang akan membuat jendela modal kita. Kita akan memulai dengan membuat div dengan ID 'modal'. Ini akan menjadi dasar dari jendela modal kita.


<body>

<a href="#" id="button">Click me</a>


<div id="modal">

</div>

Oke, ke beberapa penataan untuk jendela ini. Sekali lagi kita akan menggunakan metode pemusatan. Anda mungkin juga melihat kita menggunakan !important. Memaku gaya CSS dalam metode ini sering tidak disarankan (dapat merusak kekhususan stylesheet dan membuat pengeditan di masa mendatang benar-benar aneh), tetapi dalam kasus ini kita tidak memiliki alternatif karena gaya plugin yang ditentukan harus ditimpa.

Kita juga menambahkan visibility:hidden; untuk menyembunyikan menu, ini akan ditampilkan dengan mengklik tombol kita.


#modal {
	width:360px;
	height:189px;
	padding:8px;

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

	-webkit-border-radius:8px;
	-moz-border-radius:8px;
	border-radius:8px;

	position:absolute !important;
	top:50% !important;
	left:50% !important;
	margin-top:-94px !important;
	margin-left:-180px !important;
	z-index:101;
}

Kita telah menerapkan border-radius 8px yang mungkin tampak seperti nilai yang tidak biasa, tetapi ini akan memastikan sudut luar mengalir dengan tepat mengelilingi mereka di bagian dalam.

Langkah 5: Judul Modal

Selanjutnya kita akan menambahkan judul modal, ini akan menjadi div lain dengan ID heading dan hanya beberapa teks di dalamnya. Tentu saja, jangan ragu untuk menggunakan <h2> atau apa pun yang Anda inginkan.


<body>

<a href="#" id="button">Click me</a>


<div id="modal">

	<div id="heading">
		Are you sure you want to do that?
	</div>

Setelah itu, kita akan menambahkan beberapa CSS untuk menatanya, hanya beberapa hal dasar di sini, box shadow, gradien dll.


#heading {
	width:360px;
	height:44px;

	background-image: -webkit-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
	background-image: -moz-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
	background-image: -o-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
	background-image: -ms-linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
	background-image: linear-gradient(top, rgb(249, 249, 249), rgb(233, 233, 233));
	filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,StartColorStr='#f9f9f9', EndColorStr='#e9e9e9');

	border-bottom:1px solid #bababa;

	-webkit-box-shadow:
		inset 0px -1px 0px #fff,
		0px 1px 3px rgba(0,0,0,.08);
	-moz-box-shadow:
		inset 0px -1px 0px #fff,
		0px 1px 3px rgba(0,0,0,.08);
	box-shadow:
		inset 0px -1px 0px #fff,
		0px 1px 3px rgba(0,0,0,.08);

	-webkit-border-radius:4px 4px 0px 0px;
	-moz-border-radius:4px 4px 0px 0px;
	border-radius:4px 4px 0px 0px;

	font-size:14px;
	font-weight:bold;
	text-align:center;
	line-height:44px;

	color:#444444;
	text-shadow:0px 1px 0px #fff;
}

Langkah 6: Konten Utama Modal

Sekarang kita akan membuat bagian yang menampung paragraf dan tombol.


<body>

<a href="#" id="button">Click me</a>


<div id="modal">

	<div id="heading">
		Are you sure you want to do that?
	</div>
	
	<div id="content">
		<p>Clicking yes will make Comic Sans your new system<br> default font. Seriously, have you thought this through?</p>

		<a href="#" class="button green close"><img src="images/tick.png">Yes, do it now!</a>

		<a href="#" class="button red close"><img src="images/cross.png">No, I’m insane!</a>
	</div>

Beberapa aturan dasar CSS lagi, untuk paragraf kita mendefinisikan lebar 100% dan menyejajarkan teks ke tengah tetapi perhatikan dalam HTML kita menggunakan line break.


#content {
	width:360px;
	height:144px;

	background:#fcfcfc;

	-webkit-box-shadow:0px 1px 3px rgba(0,0,0,.25);
	-moz-box-shadow:0px 1px 3px rgba(0,0,0,.25);
	box-shadow:0px 1px 3px rgba(0,0,0,.25);

	-webkit-border-radius:0px 0px 4px 4px;
	-moz-border-radius:0px 0px 4px 4px;
	border-radius:0px 0px 4px 4px;
}

#content p {
	font-size:13px;
	font-weight:normal;
	text-align:center;
	line-height:22px;
	color:#555555;

	width:100%;
	float: left;

	margin:19px 0;
}

Langkah 7: Tombol-tombol Itu!

Kita menambahkan beberapa markup untuk tombol di langkah terakhir tetapi sekarang kita akan menambahkan beberapa gaya untuk mereka. Anda mungkin telah memperhatikan bahwa kita juga menggunakan dua gambar di sini, ini digunakan untuk tanda silang dan centang. Cara kita menyusun ini adalah dengan menambahkan dua kelas, button yang menentukan semua gaya utama dari tombol dan kemudian kelas red dan green, jelas untuk menciptakan warna.

Kita juga telah menargetkan gambar di dalam tombol, float ke kiri dan memberi mereka lebar dan tinggi.

1
2	.button {
3	width:138px;
4	height:33px;
5
6	font-size:13px;
7	font-weight:bold;
8	line-height:33px;
9
10	color:#fff;
11	text-shadow:0px 1px 0px rgba(0,0,0,.2);
12
13	-webkit-border-radius:3px;
14	-moz-border-radius:3px;
15	border-radius:3px;
16
17	-webkit-box-shadow:
18	inset 0px 1px 0px rgba(255,255,255,.5),
19	0px 1px 2px rgba(0,0,0,.3);
20	-moz-box-shadow:
21	inset 0px 1px 0px rgba(255,255,255,.5),
22	0px 1px 2px rgba(0,0,0,.3);
23	box-shadow:
24	inset 0px 1px 0px rgba(255,255,255,.5),
25	0px 1px 2px rgba(0,0,0,.3);
26
27	float:left;
28	}
29	.button img {
30	float:left;
31	width:33px;
32	height:33px;
33	}
34
35
36
37	.button.green {
38	background: -webkit-linear-gradient(top, rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
39	background: -moz-linear-gradient(top, rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
40	background: -o-linear-gradient(top, rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
41	background: -ms-linear-gradient(top, rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
42	background: linear-gradient(top, rgba(170,212,79,1) 0%,rgba(116,185,49,1) 90%,rgba(106,173,45,1) 95%,rgba(96,157,41,1) 100%);
43	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aad44f', endColorstr='#609d29',GradientType=0 );
44
45	border:1px solid #5b8821;
46
47	margin:0 5px 0 35px;
48	}
49	.button.red {
50	background: -webkit-linear-gradient(top, rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
51	background: -moz-linear-gradient(top, rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
52	background: -o-linear-gradient(top, rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
53	background: -ms-linear-gradient(top, rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
54	background: linear-gradient(top, rgba(248,114,136,1) 0%,rgba(243,71,85,1) 90%,rgba(225,65,77,1) 95%,rgba(206,59,70,1) 100%);
55	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f87288', endColorstr='#ce3b46',GradientType=0 );
56
57	border:1px solid #b0333e;
58
59	margin:0 35px 0 5px;
60	}

Langkah 8: Menghubungkannya dengan Reveal

Sekarang kita akhirnya selesai menata modal kita, kita akan menghubungkannya dengan plugin Reveal. Pertama kita harus kembali ke CSS, menemukan #modal dan menambahkan visibility:hidden; untuk itu.

Selanjutnya kita harus kembali ke dokumen html dan menambahkan yang berikut ke bagian bawah dokumen kita, di bawah tempat kita mereferensikan skrip Reveal. Di sini kita mengaitkan tombol sebagai item mengklik kita dan div modal kita sebagai item yang terbuka.


<script type="text/javascript">
	$(document).ready(function() {
		$('#button').click(function(e) { 		// Button which will activate our modal
			$('#modal').reveal({ 				// The item which will be opened with reveal
				animation: 'fade',              // fade, fadeAndPop, none
				animationspeed: 600,            // how fast animtions are
				closeonbackgroundclick: true,   // if you click background will modal close?
				dismissmodalclass: 'close'    	// the class of a button or element that will close an open modal
			});
		return false;
		});
	});
</script>

Langkah 9: Di mana Overlay itu?

Anda mungkin berpikir kita sudah selesai, tapi tunggu! Kita seharusnya memiliki lapisan hitam untuk menutupi semuanya di bawah modal - seluruh halaman. Untuk memperbaiki ini, kita perlu menerapkan beberapa CSS ke elemen yang dibuat oleh plugin reveal, menutupi halaman.


.reveal-modal-bg { 
	position: fixed; 
	height: 100%;
	width: 100%;
	background: #000;
	background: rgba(0,0,0,.4);
	z-index: 100;
	display: none;
	top: 0;
	left: 0; 
}

Langkah 10: Membuatnya Mobile

Oke, kita telah menyelesaikan modal kita sekarang tetapi kita akan menambahkan beberapa gaya diperuntukkan bagi perangkat yang lebih kecil. Media query berikut (ditambahkan setelah semua aturan css lainnya) menerapkan gaya bila dilihat dengan layar tidak lebih lebar dari 767px. Agar modal dapat dilihat dengan benar tanpa tumpang tindih dari layar, kita hanya mengubah beberapa lebar, tinggi dan ukuran font.


@media only screen and (max-width: 767px) {
        
	#modal {
		width:284px;
		height:156px;
		padding:8px;

		margin-left:-150px !important;
		margin-top:-78px;
	}
	#heading {
		width:284px;
		height:28px;

		line-height:28px;
		font-size:0.688em;
	}
	#content {
		width:284px;
		height:128px;
   	}
   	#content p {
   		width:284px;
   		font-size:0.688em;
   	}
   	.button img { 
		width:23px;
		height:23px;
	}
	.button {
		width:108px;
		height:23px;

		line-height:23px;
		font-size:0.688em;
	}
	.button.green {
		margin:0 4px 0 28px !important;
	}
	.button.red {
		margin:0 28px 0 4px !important;
	}
}

Browser Lama

Jadi bagaimana semua biaya ini di browser yang lebih lama?

Nah, selain teknik CSS3 modern seperti gradien, border-radius dll, modal akan bekerja seperti yang diharapkan pada versi Internet Explorer yang lebih lama. Contoh sempurna dari degradasi yang anggun.

Kesimpulan

Oke kita telah melakukannya! Kita telah mengambil salah satu desain Orman dan mengkodekannya, kali ini menggunakan plugin jQuery gratis bernama Reveal.

Saya harap Anda menyukai tutorial ini, terima kasih telah membaca!