integrating modal view into the website that shows on button click - html

Question

I have created a modal view that I want to appear in the middle of the screen when a button #showModalView is pressed and gets hidden if a user clicks anywhere but inside the modal view. This is the code to the modal view: modal view fiddle.
I am having troubles integrating this view into the current website. This is the backbone of my website:
<div>
<div class="header">THIS IS HEADER</div>
<p>paragraph 1</p>
<p>paragraph 1</p>
<div class="button">
<a id="showModalView" href="#">CLICK ME</a>
</div>
<br />
<div class="FOOTER">THIS IS FOOTER</div>
</div>
Any idea how can I do this?

Answer 1

Assuming you can use jQuery you can do this...
$("#showModalView").click(function(){
$("#buy-wrapper").show();
});
$("#buy-wrapper").click(function(e){
if ($(e.target).closest("#buy-box").length === 0)
$("#buy-wrapper").hide();
});
.buy-input-general {
outline: none;
}
#buy-wrapper {
display:none;
position:absolute;
top:0;
right:0;
bottom:0;
left:0;
background:rgba(200, 54, 54, 0.5);
}
#buy-box {
width: 345px;
height: 470px;
background-color: #fff;
margin: 0 auto;
-webkit-border-radius: 4px;
-o-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 3px;
border: thin solid #ededed;
}
#top_header {
width: 100%;
margin: 0;
padding-top: 45px;
}
#top_header > h3 {
text-align: center;
font-family: 'Lato', sans-serif;
font-size: 32px;
font-weight: 800;
color: #282828;
-webkit-text-stroke: 0.5px;
margin: 0;
}
#top_header > h5 {
text-align: center;
font-family: 'Roboto', sans-serif;
font-size: 15px;
font-weight: 300;
color: #424242;
line-height: 1.6;
margin: 0;
padding: 15px 0;
color: #a6a6a6;
-webkit-text-stroke: 0.2px;
}
#buy-inputs {
width: 100%;
height: 100%;
margin: 0 auto;
position: relative;
}
.buy-input-submit, .buy-input-text {
width: 300px;
height: 55px;
position: relative;
margin: 0 auto;
display: block;
margin-bottom: 10px;
padding: 15px;
box-sizing: border-box;
-webkit-text-stroke: 0.1px;
}
.buy-input-text {
font-family: 'Lato', sans-serif;
font-weight: 300;
border: thin solid #efefef;
color: #4f4f4f;
}
.buy-input-text:focus {
border: thin solid #ededed;
-webkit-transition: all .4s ease;
-moz-transition: all .4s ease;
-o-transition: all .4s ease;
transition: all .4s ease;
}
.buy-input-text:focus{
border-left: thin solid #282828;
}
.buy-input-submit {
color: #282828;
background-color: #fff;
border: 1px solid #282828;
border-radius: 2px;
font-family: 'Roboto', sans-serif;
font-weight: 400;
transition: all .2s ease;
margin-top: 15px;
cursor: pointer;
font-size:115%;
}
.buy-input-submit:hover {
background-color: #289928;
color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="header">THIS IS HEADER</div>
<p>paragraph 1</p>
<p>paragraph 1</p>
<div class="button">
<a id="showModalView" href="#">CLICK ME</a>
</div>
<br />
<div class="FOOTER">THIS IS FOOTER</div>
</div>
<div id="buy-wrapper">
<div id="buy-box">
<div id="top_header">
<h3>Lallaa</h3>
<h5>
Enter details. <br />
You know, because reasons and stuff. <br />Just do it.
</h5>
</div>
<di id="buy-inputs">
<input class="buy-input-text buy-input-general" type="text" placeholder="First name">
<input class="buy-input-text buy-input-general" type="text" placeholder="Last name">
<input class="buy-input-text buy-input-general" type="text" placeholder="Email">
<input class="buy-input-submit buy-input-general" type="submit" value="NEXT">
</di>
<div id="bottom">
</div>
</div>
</div>