Size Guide Open and Close

by James Hooper

HTML

<div id="size_guide">Size Guide</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
  font-family: 'Roboto', sans-serif;
}
#modalPopup{
  background-color:rgb(38, 38, 38);
  height:100%;
  width:100%;
  font-family:'Roboto', sans-serif;
}
#modalPopup .row.inner {
  position:fixed;
  top:0;
  width:75%;
  background:#262626;
  text-align:center;
  padding:40px 10px;
  margin:10px;
  border-radius:10px;

  h3 {
    color:#F1F0E2;
    margin:0;
    width:100%;
    display:inline-block;
    font-size:24px;
    text-transform:uppercase;
    line-height:1;
  }
  
  p {
    color:#F1F0E2;
    display:inline-block;
    margin:12px 0;
    width:100%;
    line-height:1;
  }
  
  a.button {
    display:inline-block;
    cursor:pointer;
    padding:10px;
    color:#fff;
    font-weight:bold;
    border-radius:5px;
    transition:1s;
    background:grey;
  }
}

JavaScript

function sizeGuideModal(){
jQuery("body").append('<div id="modalPopup"> <div class="row inner"><h3>Size Guide</h3><p>Here is the size guide, make sure you chose the right size as we do not accept returns based off wrong size orders.</p><a class="button close">Close</a></div><div>')
};

sizeGuideModal();

jQuery("#size_guide").click(function(){
  sizeGuideModal()  
});

jQuery("a.close").click(function(){
	jQuery("#modalPopup").remove();
});