Simple Flat UI Menu Modal Dialog

Simple Flat UI Menu Modal Dialog - Memanfaatkan dialog modal untuk membungkus tombol button maupun widget akan semakin menambah keindahan dan kreasi pada sebuah blog/website. Dan tentunya masih menggunakan konsep Ui design sesuai perkembangannya saat ini, seperti simple flat ui navigasi menu dan menu metro ui efek modal dialog serta random post efek modal jquery ui yang sudah saya posting sebelumnya.

DEMO
DEMO CODE

KONSEP DASAR :

CSS

/* Vn Navigasi
-------------------------*/
.vn-nav{
background:#1abc9c;
border-radius:6px;
width:auto;
padding-top:15px;
padding-bottom:15px;
font-size:14px;
padding-left:20px;
border-bottom: #16a085 3px solid;
margin-bottom:10px;
}

.vn-nav ul { margin: 0; padding: 0; list-style-type: none; list-style-image: none; }
.vn-nav li { margin-right: 0px; display: inline; }
.vn-nav ul li a { text-decoration:none; margin: 0px; padding: 15px 20px 15px 20px; color:#ffffff; }
.vn-nav li.current-menu-item a{ color: #fff; text-decoration:none; background-color:#16a085; }
.vn-nav li.current_page_item { color: #fff; text-decoration:none; background-color:#16a085; }

/* Vn Simple Modal
-------------------------*/
.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialog:target {
opacity:1;
pointer-events: auto;
}

.modalDialog > div {
width: 400px;height:auto;
position: relative;
margin: 5% auto;
padding: 5px 20px 13px 20px;
background: #34495e;color:#fff;
}

.close {
background: #2c3e50;
color: #16a085;padding:5px;border-radius:0 0 12px 0;
line-height: 16px;
position: absolute;
right: -55px;
text-align: center;
top: 0;
width: 16px;
text-decoration: none;
font-weight: bold;
}

.close:hover { background: #2c3e50;color:#e74c3c }

/* Vn Button
-------------------------*/

.vn-green a{
background-color:#27ae60;
display:inline-block;
position:relative;
margin:30px 5px;
padding:20px 20px 20px 80px;
color:#fff;
transition:all 0.4s ease
}

.vn-green a:hover{
background:#2c3e50
}

HTML

<div class="vn-nav">
<ul>
<li><a href="#openModal">Button</a>

<div id="openModal" class="modalDialog">
<div>
<a href="#close" title="Close" class="close">X</a>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna. Nunc viverra imperdiet enim. Fusce est. Vivamus a tellus. </p>
<div class="vn-green" style="text-align: center;">
<a href="#">KLIK</a>
</div>
</div>
</div></li>
</ul>
</div>

Untuk kode selengkapnya silakan kik link demo codenya
Source

 

Bagus gan.
Tapi untuk kemudahan user sebaiknya ketika klik menu tidak perlu keluar modal.
sebaiknya langsung tertuju ke link yang di klik

 

Sepakat dengan @exabytes-id