codepen.io - Pure css popup box by prakash

---

Codepen - Material UI popup by Mikael Ainalem

---

---

---

---

---

CodePen Home Modal - Pure CSS (no JavaScript) - 2013

Modal!

---

Open modal

<div class="kv-modal" id="kv-modal">
	<div class="kv-modal-content">
        <div class="kv-modal-header">
            <div class="header">
                <h3>Popup | Modal | PURE CSS</h3>
            </div>
        </div>	
        <div class="kv-modal-body">


        <p align="justify"> Post your cheque to the address below:<br>
                  Goreeb & Yateem Trust Fund<br>
                  259 (2nd Floor) Whitechapel Road<br>
                  London E1 1DB<br>

               <p> <i class="fa fa-mobile" style="color: #0a88bb;"></i> : (+44) 07498 749 015</p>
                <p>  <i class="fa fa-phone" style="color: #0a88bb;"></i>: (+44) 02072 478 245 </p>

            <hr>			
        </div>
        <div class="kv-modal-footer">
            <a class="kv-modal-close" href="#close">[✖] Close</a>
        </div>
    </div>
</div>
<!-- End Modal -->
<!-- Link in page to show modal on click-->
<a href="#kv-modal">Open modal</a>


<style>

.kv-modal {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	opacity: 0;
        z-index: 9999;	
        overflow: auto;
	position: fixed;
        visibility: hidden;
	margin-top: -250px;
	background: rgba(0,0,0,.8);
	
	transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	-webkit-transition: all .3s ease-in-out;
}

.kv-modal:target {
	opacity: 1;
	margin-top: 0px;
	visibility: visible;	
}

.kv-modal-content {
	width: 70%;
    padding: 25px;
	background: #FFF;
	max-width: 600px;
    margin: 70px auto;
	position: relative;
	border-radius: 8px;
	box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
}

/*
.kv-modal-close {
	top: 9px;
	right: 12px;
	float: right;
	position: absolute;
}
*/

---