我的弹出窗口未正确显示

Question

我正在重新设计一个有趣的网站。单击按钮后，我会弹出一个弹出窗口。但是，窗口和按钮显示在一个奇怪的布局中。该按钮显示在最左侧，文本全部显示在屏幕上。您实际上可以在codepen上看到整个代码：http://codepen.io/sibraza/pen/wWgqBO

这是HTML：

<!--- This is what the user see when they click the button --> 
<span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>

<!-- this is what the user sees when the popup is displayed --> 
<div class="popup">
 <h2>Subscribe to the Newletter:</h2>
    <button name="close">Close Pop-up</button>
</div>

这是CSS：

button {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background: lightcoral;
  border: 0;
  border-radius: 4px;
  padding: 7px 15px;
  font-size: 16px;
  color: #FFFFFF;
  cursor: pointer;
}
button:focus {
  outline: none;
}
button:hover {
  background: #f39797;
}

.popup {
  background: rgba(255, 255, 255, 0.8);
  position: fixed;
  display: none;
  z-index: 5000;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.popup > div {
  border-radius: 4px;
  position: fixed;
  background: #FFFFFF;
  box-shadow: 0px 0px 12px #666666;
  padding: 30px 15px;
  /* Width of popup can be changed */
  width: 80%;
  max-width: 600px;
  z-index: 5001;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  text-align: center;
}

这是JavaScript：

function popupOpenClose(popup) {

    /* Add div inside popup for layout if one doesn't exist */
    if ($(".wrapper").length == 0){
        $(popup).wrapInner("<div class='wrapper'></div>");
    }

    /* Open popup */
    $(popup).show();

    /* Close popup if user clicks on background */
    $(popup).click(function(e) {
        if ( e.target == this ) {
            if ($(popup).is(':visible')) {
                $(popup).hide();
            }
        }
    });

    /* Close popup and remove errors if user clicks on cancel or close buttons */
    $(popup).find("button[name=close]").on("click", function() {
        if ($(".formElementError").is(':visible')) {
            $(".formElementError").remove();
        }
        $(popup).hide();
    });
}

$(document).ready(function () {
    $("[data-js=open]").on("click", function() {
        popupOpenClose($(".popup"));
    });
});

Answer 1

您需要格式化

<div class="popup">
 <h2>Subscribe to the Newletter:</h2><br>
  <center><button name="close">Close Pop-up</button></center>
</div>

但你没有提到你想如何显示你的弹出窗口，即中心？或任何其他信息。这对我有用，看起来很好。

Answer 2

试试这段代码，我添加了一个简单的表格。您可以根据需要更改弹出窗口或表单的CSS。

function toggleOn(){
  $('body, #menu, #navbar, #content').toggleClass('on');
}

$(document).ready(function (){
  $('#menu').click(function(){ toggleOn(); });
  $('#content').click(function(){
    if ($('#navbar').hasClass('on')) toggleOn();
  });
});
//this is for the pop up 
function popupOpenClose(popup) {
	
	/* Add div inside popup for layout if one doesn't exist */
	if ($(".wrapper").length == 0){
		$(popup).wrapInner("<div class='wrapper'></div>");
	}
	
	/* Open popup */
	$(popup).show();

	/* Close popup if user clicks on background */
	$(popup).click(function(e) {
		if ( e.target == this ) {
			if ($(popup).is(':visible')) {
				$(popup).hide();
			}
		}
	});

	/* Close popup and remove errors if user clicks on cancel or close buttons */
	$(popup).find("button[name=close]").on("click", function() {
		if ($(".formElementError").is(':visible')) {
			$(".formElementError").remove();
		}
		$(popup).hide();
	});
}

$(document).ready(function () {
	$("[data-js=open]").on("click", function() {
		popupOpenClose($(".popup"));
	});
});

//search bar 
$(document).on('ready', function(){
	
	var $wrap = $('[js-ui-search]');
	var $close = $('[js-ui-close]');
	var $input = $('[js-ui-text]');
	
	$close.on('click', function(){
		$wrap.toggleClass('open');
	});
	
	$input.on('transitionend webkitTransitionEnd oTransitionEnd', function(){
		console.log('triggered end animation');
		if ($wrap.hasClass('open')) {
			$input.focus();
		} else {
			return;
		}
	});
});
// pop up window

body {
  color: white;
 font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: inherit;
  background: #000000;
  perspective: 600px;
}
body h1, body h2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  color: white;
font-family: 'Lato', sans-serif;
  text-transform: uppercase;
  letter-spacing: 2px;
}
body h1 {
  top: 24px;
  font-size: 12px;
  color: #cc0000; 
   margin-top: 200px; 
}
body h2 {
  font-size: 10px;
  opacity: 0.7;
  color: #cc0000; 
  z-index: 1; 
 
}
body .msg {
  position: absolute;
  display: inline-block;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  border-radius: 3px;
  padding: 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

body.on {
  overflow: hidden;

}

#menu {
  z-index: 100;
  position: fixed;
  width: 40px;
  height: 40px;
  top: 50px;
  right: 50px;
  background: none;
  border: none;
  border-radius: 5px;
  outline: none;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  transform: rotate(-90deg);
}
#menu:hover {
  background: #cc0000;
  transition: all 0.2s ease-in-out;
}
#menu #line {
  position: absolute;
  width: 22px;
  height: 2px;
  left: 9px;
  top: 19px;
  background: white;
}
#menu #arrow {
  position: absolute;
  width: 6px;
  height: 6px;
  top: 16px;
  right: 9px;
  border-top: 2px solid white;
  border-right: 2px solid white;
  transform: rotate(45deg);
}

#menu.on {
  transition: all 0.2s ease-in-out;
  transform: rotate(90deg);
}
#menu.on:hover {
  background: #404040;
  transition: all 0.2s ease-in-out;
}

section {
  position: relative;
  width: 100%;
  height: 450px;
  padding: 1.5px 2.5px;
  background: black;
  transition: all 0.3s ease-in-out;
  }

section.msg {
  position: absolute;
  opacity: 0.8; 
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  
}

section.on {
  box-shadow: 0 5px 20px #333333;
  border-radius: 6px;
  cursor: zoom-out;
  transition: all 0.3s ease-in-out;
  transform-origin: 50% 0;
  transform: scale(0.8) translateY(100vh);
}

#navbar {
  margin-top: 60px; 
  z-index: 90;
  position: fixed;
  width: 90vw;
  height: 70vh;
  top: 0;
  left: 50%;
  opacity: 0;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
  transform-origin: 50% 0;
  transform: translateX(-50%) scale(0);
}
#navbar .msg {
  background: #404040;
}

#navbar.on {
  top: 5vh;
  opacity: 1;
  transition: all 0.3s ease-in-out;
  transform: translateX(-50%) scale(1);
}
/* BASE
   ================================================================= */
html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
}
body {
 font-family: 'Lato', sans-serif;
  font-size: 18px;
  line-height: 2.35;
  color: #cc0000;
  margin: 0;
}
p {
  padding-top: 3em;
  max-width: 700px;
  margin: 0 auto;
}
/* DYNAMIC NAVIGATION BAR
   ================================================================= */
nav {
  position: fixed;
  width: 100%;
  top: 0;
  background: black;
  -webkit-transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
  transition: all 650ms cubic-bezier(0.22, 1, 0.25, 1);
  z-index: 1; 
  height: 80px; 

}
nav:before {
  content: "";
  display: block;
  position: absolute;
  background: rgba(0, 0, 0, 0.27);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

nav ul {
  position: relative;
  margin: 0;
  z-index: 2;
  text-transform: uppercase;
  text-align: center;
}
nav ul li {
  
  display: inline-block;
  padding: 1.35em 0;
  margin-right: 3em;
  font-size: 0.9em;
}
nav ul li a {
  text-decoration: none;
  color: #cc0000;
  font-size: 0.9em;
}
nav ul li a:hover{
  color: white; 
}
.edit{
  margin-top: 150px;  
}
.direct{
  margin-top: 250px; 
  color: white; 
}
button {
  font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
  background: lightcoral;
  border: 0;
  border-radius: 4px;
  padding: 7px 15px;
  font-size: 16px;
  color: #FFFFFF;
  cursor: pointer;
}
button:focus {
  outline: none;
}
button:hover {
  background: #f39797;
}

.popup {
  background: rgba(255, 255, 255, 0.8);
  position: fixed;
  display: none;
  z-index: 5000;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
}
.popup > div {
  border-radius: 4px;
  position: fixed;
  background: #FFFFFF;
  box-shadow: 0px 0px 12px #666666;
  padding: 30px 15px;
  /* Width of popup can be changed */
  width: 80%;
  max-width: 600px;
  z-index: 5001;
  -webkit-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -o-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  left: 50%;
  top: 50%;
  text-align: center;
}

.logo{
  float: left;
}
.logos{
  margin-top: -9px; 
  width: 150px;
  height: 100%;
}
section.content{
  margin-top: 400px; 
}

.stuff{
  margin-top: 100px; 
 height: 350px;
  width: 100%;
  object-fit: cover;
   opacity: .4; 
}
.products{
  margin-left: 560px; 
  margin-top: 360px;
}
.footy{
  color: white; 
  background: black; 
  height:140px; 
  width: 100%; 
}
.about_info{
  width: 80%; 
  float: left; 
  font-size: 14px; 
  margin-left: 30px; 
}
.about_us{
  margin-left: 30px;  
}
.reach_out{
  float: left; 
 margin-top: -90px; 
 margin-left: 10px; 
}
.account{
  margin-left: 
}
.follow{
  float: right; 
  margin-right: 30px; 
  display: inline-block; 
}
.product_line{
  height: 250px;
  width: 100%;
  background: white;
  
}
.protein{
  margin-bottom: 25px; 
  padding-bottom: 20px; 
}
.social{
  float: right; 
  margin-top: 30px; 
}
form{
  width:100%;
  text-align:center;
}
input[type="text"] {
  -webkit-appearance: none;
  outline: none;
  border: none;
}

.search-wrap {
  position: relative;
  display: block;
  z-index: 1;
  width: 40px;
  height: 40px;
  margin-left: 0;
  padding: 0;
  border: 2px solid white;
  border-radius: 20px;
  -moz-transition: all 0.25s ease 0.3s;
  -o-transition: all 0.25s ease 0.3s;
  -webkit-transition: all 0.25s ease;
  -webkit-transition-delay: 0.3s;
  transition: all 0.25s ease 0.3s;
}
.search-wrap:before {
  top: 90%;
  left: 90%;
  width: 16px;
  height: 2px;
  background-color: white;
  border-radius: 1px;
  -moz-transition: width 0.15s ease 0.55s;
  -o-transition: width 0.15s ease 0.55s;
  -webkit-transition: width 0.15s ease;
  -webkit-transition-delay: 0.55s;
  transition: width 0.15s ease 0.55s;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-transform-origin: top left;
  -ms-transform-origin: top left;
  -webkit-transform-origin: top left;
  transform-origin: top left;
}
.search-wrap input {
  width: 100%;
  height: 100%;
  padding: 0 30px 0 15px;
  font-size: 14px;
  line-height: 38px;
  opacity: 0;
  background-color: transparent;
  -moz-transition: opacity 0.15s ease;
  -o-transition: opacity 0.15s ease;
  -webkit-transition: opacity 0.15s ease;
  transition: opacity 0.15s ease;
}

.eks {
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  z-index: 20;
  width: 30px;
  height: 30px;
  cursor: pointer;
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}
.eks:before, .eks:after {
  right: 5px;
  height: 2px;
  width: 2px;
  border-radius: 1px;
  -moz-transition: all 0.25s ease;
  -o-transition: all 0.25s ease;
  -webkit-transition: all 0.25s ease;
  transition: all 0.25s ease;
}
.eks:before {
  top: 0px;
  background-color: white;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -moz-transform-origin: top right;
  -ms-transform-origin: top right;
  -webkit-transform-origin: top right;
  transform-origin: top right;
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.eks:after {
  bottom: 0px;
  background-color: white;
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  -moz-transform-origin: bottom right;
  -ms-transform-origin: bottom right;
  -webkit-transform-origin: bottom right;
  transform-origin: bottom right;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}

.search-wrap.open {
  width: 160px;
  -moz-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  -webkit-transition-delay: 0.1s;
  transition-delay: 0.1s;
}
.search-wrap.open:before {
  width: 0px;
  -moz-transition-delay: 0s;
  -o-transition-delay: 0s;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.search-wrap.open input {
  opacity: 1;
  -moz-transition-delay: 0.15s;
  -o-transition-delay: 0.15s;
  -webkit-transition-delay: 0.15s;
  transition-delay: 0.15s;
}
.search-wrap.open .eks:before, .search-wrap.open .eks:after {
  width: 15px;
  right: 12px;
}
.search-wrap.open .eks:before {
  top: 9px;
  -moz-transition-delay: 0.25s;
  -o-transition-delay: 0.25s;
  -webkit-transition-delay: 0.25s;
  transition-delay: 0.25s;
}
.search-wrap.open .eks:after {
  bottom: 9px;
  -moz-transition-delay: 0.3s;
  -o-transition-delay: 0.3s;
  -webkit-transition-delay: 0.3s;
  transition-delay: 0.3s;
}

.search-wrap:before, .eks:before, .eks:after {
  content: "";
  position: absolute;
  display: block;
}

a{
  color: white; 
}
a:hover{
  color: red; 
}
.reach_out{
  list-style-type: none;
}

.links{
  margin-top: 30px; 
  margin-right: 30px; 
  list-style-type: none;
}
.icon-button {
	background-color: white;
	border-radius: 2.6rem;
	cursor: pointer;
	display: inline-block;
	font-size: 1.3rem;
	height: 2.6rem;
	line-height: 2.6rem;
	margin: 0 5px;
	position: relative;
	text-align: center;
	-webkit-user-select: none;
	   -moz-user-select: none;
	    -ms-user-select: none;
	        user-select: none;
	width: 2.6rem;
}

/* Circle */
.icon-button span {
	border-radius: 0;
	display: block;
	height: 0;
	left: 50%;
	margin: 0;
	position: absolute;
	top: 50%;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
	width: 0;
}
.icon-button:hover span {
	width: 2.6rem;
	height: 2.6rem;
	border-radius: 2.6rem;
	margin: -1.3rem;
}

/* Icons */
.icon-button i {
	background: none;
	color: white;
	height: 2.6rem;
	left: 0;
	line-height: 2.6rem;
	position: absolute;
	top: 0;
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	     -o-transition: all 0.3s;
	        transition: all 0.3s;
	width: 2.6rem;
	z-index: 10;
}

.twitter span {
	background-color: #4099ff;
}
.facebook span {
	background-color: #3B5998;
}
.google-plus span {
	background-color: #db5a3c;
}
.tumblr span {
	background-color: #34526f;
}
.instagram span {
	background-color: #517fa4;
}
.youtube span {
	background-color: #bb0000;
}
.pinterest span {
	background-color: #cb2027;
}



.icon-button .fa-twitter {
	color: #4099ff;
}
.icon-button .fa-facebook {
	color: #3B5998;
}
.icon-button .fa-tumblr {
	color: #34526f;
}
.icon-button .fa-instagram {
	color: #517fa4;
}
.icon-button .fa-youtube {
	color: #bb0000;
}
.icon-button .fa-pinterest {
	color: #cb2027;
}




.icon-button:hover .fa-twitter,
.icon-button:hover .fa-facebook,
.icon-button:hover .icon-google-plus,
.icon-button:hover .fa-tumblr,
.icon-button:hover .fa-instagram,
.icon-button:hover .fa-youtube,
.icon-button:hover .fa-pinterest {
	color: white;
}

@media all and (max-width: 680px) {
  .icon-button {
    border-radius: 1.6rem;
    font-size: 0.8rem;
    height: 1.6rem;
    line-height: 1.6rem;
    width: 1.6rem;
  }

  .icon-button:hover span {
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 1.6rem;
    margin: -0.8rem;
  }

  /* Icons */
  .icon-button i {
	  height: 1.6rem;
	  line-height: 1.6rem;
	  width: 1.6rem;
  }
  body {

	  padding: 10px;
  }
  .pinterest {
   display: none; 
  }

}

.wrapper {
  max-width: 60rem;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 3rem;
}
.box {
  width: 15rem;
  height: 20rem;
  padding: 0 2rem 3rem;
  transition:
    transform 0.3s linear 0s,
    filter 0.5s linear 0.3s,
    opacity 0.5s linear 0.3s;
  /*transform-origin: top center;*/
}
.production {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 0.2rem;
  background-image: url(https://www.lamnia.com/images/sg-150-Shirts_and_T-Shirts.jpg);
  background-color: #fff;
  background-position: top 3rem center;
  background-size: 80%;
  background-repeat: no-repeat;
  box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.1);
  transition:
    box-shadow 0.5s linear,
    height 0.1s linear 0s;
}
.name {
  display: block;
  padding: 1rem 0.5rem;
}
.description {
  position: absolute;
  bottom: 1rem;
  left: 0;
  right: 0;
  display: block;
  padding: 0 1.5rem;
  opacity: 0;
  transition: opacity 0.1s linear 0s;
}
.wrapper:hover .box:not(:hover)  {
  filter: blur(3px);
  opacity: 0.5;
}
.box:hover  {
  transform: scale(1.1);
  transition:
    transform 0.3s linear 0.3s,
    filter 0.1s linear 0s,
    opacity 0.1s linear 0s;
}
.box:hover .production {
  height: 23rem;
  box-shadow: 0 0 1rem rgba(0, 0, 0, 0.2);
  transition:
    box-shadow 1s linear,
    height 0.3s linear 0.5s;
}
.box:hover .description {
  opacity: 1;
  transition: opacity 0.3s linear 0.75s;
}

form{
  background: white;
  
  text-align: center;
  overflow: scroll;
  padding: 0;
  margin: 0;
  max-height: 400px
  
  }


/* This is for pop window */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<head>
  <link rel="stylesheet" href=" https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
  
  <link href='https://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
</head>
<button id="menu"><span id="line"></span><span id="arrow"></span></button>
<nav id="nav">
    <ul>
      <li class="logo"><img class="logos" src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466803605/logo_jayvyh.png"></img></li>
      <li><a href="#section1">Home </a></li>
      <li><a href="#section2">Shop </a></li>
      <li><a href="#section3">About Us</a></li>
      <li><div class="search-wrap" js-ui-search>
	<input type="text" placeholder="Search..." / js-ui-text>
	<span class="eks" js-ui-close></span>
</div> </li>
</ul>
  </nav>

<aside id="navbar"><span class="msg"><iframe width="560" height="315" src="https://www.youtube.com/embed/fAE8NyE3RkA" frameborder="0" allowfullscreen></iframe></span>
</aside>
<section id="content">
  <img src="http://res.cloudinary.com/dvrqqa6ja/image/upload/v1466885774/kai_di6moq.jpg"class="stuff"> </img> 
<h1 class="direct"> <strong>Click the arrow to view Kai Greene's Scar Story</strong></h1>

 <span class="msg"><button class="btn btn-danger"data-js="open">Subscribe to our Newsletter</button></span>
</section>

<div class="popup">
 <h2>Subscribe to the Newletter:</h2><br>
  <form action="#">
  First name:<br>
  <input type="text" name="firstname" placeholder="firstname"><br>
  Last name:<br>
    
  <input type="text" name="lastname" placeholder="lastname"><br><br>
  <input type="submit" value="Submit">
</form
  <center><button name="close">Close Pop-up</button></center>
</div>


  <div class="product_line">
   <div class="row">
     <div class="col-xs-12">
    <span class="products text-center">View other products</span>
     </div>
    </div>
     <div class="row">
      <div class="wrapper">
  <div class="box">
    <div class="production">
      <span class="name"></span>
     <span class="description"></span>
    </div>
  </div>
  <div class="box">
    <div class="production">
      <span class="name"></span>
      <span class="description"></span>
     </div>
   </div>
   <div class="box">
     <div class="production">
      <span class="name"></span>
       <span class="description"></span>
    </div>
  </div>
</div>
    </div>
</div>
<footer class="footy">
  <div class="container-fluid">
  <hr>
  <div class="row">
      <div class="col-xs-4">
  <h4 class="about_us">About Us </h4>
      </div>
        <div class="col-xs-4">
  <h4 class="account text-center"> My Account </h4>
      </div>
        <div class="col-xs-4">
  <h4 class="follow"> Follow Us </h4>
      </div>
    <div class="row">
      <div class="col-xs-4">
  <p class="about_info"> Dynamik Muscle was spawned on the creation of an idea to see a dream manifest into reality. We all sit back and dream, some even make goals and outline a plan of action, but few follow through.<a href="https://www.dynamikmuscle.com/#">click to read more</a></p>
      </div>
<div class="col-xs-4">
      <ul class="links text-center">
        <li> <a href="https://www.dynamikmuscle.com/search">Search</a> </li>
        <li> <a href="https://www.dynamikmuscle.com/pages/about-us">About Us </a></li>
        <li><a href="https://www.dynamikmuscle.com/pages/privacy-policy">Privacy Policy</a> </li>
        <li> <a href="https://www.dynamikmuscle.com/pages/refund-policy">Refund Policy</a> </li>
        <li> <a href="https://www.dynamikmuscle.com/pages/shipping-delivery"> Shipping and Delivery </a> </li>
        <li> <a href="https://www.dynamikmuscle.com/pages/ambassador-program"> Ambassador Program </a></li>
        <li> <a href="https://www.dynamikmuscle.com/pages/retail-distributor"> Retailers/Distributors </a> </li>
  </ul> 
    </div>
      <div class="col-xs-4">
      <ul class="social">
  <a href="#" class="icon-button twitter"><i class="fa fa-twitter"></i><span></span></a>
<a href="#" class="icon-button facebook"><i class="fa fa-facebook"></i><span></span></a>
<a href="#" class="icon-button youtube"><i class="fa fa-youtube"></i><span></span></a>
<a href="#" class="icon-button pinterest"><i class="fa fa-pinterest"></i><span></span></a>
  </ul> 
    </div>
    </div>
  <div class="row">
    <div class="col-xs-4">
 <ul class="reach_out">
  <li><i class="fa fa-home" aria-hidden="true"></i> 1120 Holland Drive #20 </li>
<li><i class="fa fa-phone" aria-hidden="true"></i>  Call Us at (561) 510-6765</li>
<li><i class="fa fa-envelope" aria-hidden="true"></i> cs@dynamikmuscle.com </li>
  </ul> 
    </div>
   
  </div>
  </div>
</footer>

以下是link to fiddle