Contact us modal

contac-us-modal-shopify

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div id="ContactUs-modal" class="contact-modal-block">
  
  <div class="contact_success">
  
  </div>
  
  <div class="contact-modal grid-uniform">
    <header class="section-header">
      <span class="close2" onclick="closemodal()">×</span>
      <h3 class="section-title">Section title</h3>
    </header>
    <main class="main-section">
      <div class="grid__item medium-down--one-whole post-large--two-thirds">
        <h4 class="section-title-pry">WE ARE HAPPY TO HELP!</h4>
        <p>Please contact us with any enquiries by filling in the form below....</p>
        <div class="contact-form">
          {% form 'contact' %}

          {% if form.posted_successfully? %}
            <p class="note form-success">
              {{ 'contact.form.post_success' | t }}
            </p>
          {% endif %}

          {{ form.errors | default_errors }}

          {% assign name_attr = 'contact.form.name' | t | handle %}
          <div class="form-group">
          <label for="ContactFormName" class="grid__item post-large--one-quarter">{{ 'Full Name' }}</label>
          <input class="grid__item three-quarters" type="text" id="ContactFormName" name="contact[{{ name_attr }}]" required autocapitalize="words" value="{% if form[name_attr] %}{{ form[name_attr] }}{% elsif customer %}{{ customer.name }}{% endif %}">
		  </div>
          
          <div class="form-group">
          <label for="ContactFormEmail" class="grid__item post-large--one-quarter">{{ 'Email Address' }}</label>
          <input class="grid__item three-quarters" type="email" id="ContactFormEmail" name="contact[email]" required autocorrect="off" autocapitalize="off" value="{% if form.email %}{{ form.email }}{% elsif customer %}{{ customer.email }}{% endif %}">
		  </div>
        
          <div class="form-group">
          <label for="ContactFormMessage" class="grid__item post-large--one-quarter">{{ 'contact.form.message' | t }}</label>
          <textarea class="grid__item three-quarters" rows="5" id="ContactFormMessage" required name="contact[body]">{% if form.body %}{{ form.body }}{% endif %}</textarea>
		  </div>
          
          <div class="form-group">
          <label for="ContactFormMessage" class="grid__item post-large--one-quarter"></label>
          <input type="submit" id="contactFormSubmit" value="{{ 'contact.form.send' | t }}" />
	      </div>
          
        {% endform %}
        </div>
        
      </div>
      <div class="grid__item medium-down--one-whole post-large--one-third">
        <aside class="contact-detail">
          <div class="one-whole">
            <div class="header-section">
              <h3 class="section-title-pry">Section title</h3>
              <p>Please Note: we are an online retailer only</p>
              <br>
            </div>  
          </div>
          <div class="one-whole">
            
          </div>
          <div class="one-whole">
          	<div class="email">
              <h3 class="section-title-sec">Email</h3>
              <p>yayaauctions@gmail.com</p>
            </div>
          </div>
          <div class="one-whole">
          	<div class="social-link-block">
              <h3 class="section-title-sec">FOLLOW US:</h3>
              <nav class="social-link">
                <ul>
                  <li>
                    <a href="#">
                      <i class="fa fa-instagram" aria-hidden="true"></i>
                    </a>
                  </li>
                  <li>
                    <a href="#">
                      <i class="fa fa-facebook-square" aria-hidden="true"></i>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </aside>
      </div>
    </main>
  </div>
</div>


<script>
// Get the modal
var modal2 = document.getElementById('ContactUs-modal');


// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal2.style.display = "none";
    }
}


function closemodal(){
 modal2.style.display = "none";
}



</script>

modal-js

$(function() {

  //swtch control
  $(".swatch-element").eq(0).css("border", "1px solid #666");
  $(".swatch-element label").on("click", function(){
  	$(".swatch-element").css("border", "1px solid transparent");	
  	$(this).parent(".swatch-element").css("border", "1px solid #666");    
  }) 
  
  
  // contact us modal footer
  
  $(".site-footer__links li a").on("click", function(e){
  	var elm = $(this).attr("href");
    
    if(elm == "#ContactUs-modal"){
      e.preventDefault();
    	ModalControl()	
    }else{
      console.log("no");
    }
    
    
    $(".close2").on("click", function(){
		$(elm).fadeOut();    
    })
    
    
    function ModalControl(){
    	$(elm).fadeIn();
        $(elm).on("click", function(e){
          var target = $(e.target);
            if ( target.is( "div#ContactUs-modal.contact-modal-block" ) ) {
              $(elm).fadeOut();
            }else{
              console.log("no");
            }
        });
    }
    
    
  $( "#contact_form" ).submit(function( event ) {
  event.preventDefault();
  
  
  $.ajax({
    type: "POST",
    url: "/contact#contact_form",
    data:  $( this ).serialize() ,
    success: function(data) {
       $('.contact_success').show()
       var html= '<div class="cross-btn" onclick="closemodal()">X</div>'
      $('.contact_success').html( 'Thank you for contacting us! We have received your message. A team member will follow up with you as soon as possible.'+html );
      $('.contact-modal').hide(); 
    },
    error: function(e) {
        console.log(e)
    }
    
    
});
     
  
  return false;
});
    
  });
  
  // End contact us modal footer
  
  
   // contact us modal Header
  
  $(".site-nav li a").on("click", function(e){
    
  	var elm = $(this).attr("href");

    if(elm == "#ContactUs-modal"){
        e.preventDefault();
    	ModalControl()	
    }else{
      console.log("no");
    }
    
    
    $(".close2").on("click", function(){
		$(elm).fadeOut();    
    })
    
    
    function ModalControl(){
    	$(elm).fadeIn();
        $(elm).on("click", function(e){
          var target = $(e.target);
            if ( target.is( "div#ContactUs-modal.contact-modal-block" ) ) {
              $(elm).fadeOut();
            }else{
              console.log("no");
            }
        });
    }

   $( "#contact_form" ).submit(function( event ) {
  event.preventDefault();
  
  
  $.ajax({
    type: "POST",
    url: "/contact#contact_form",
    data:  $( this ).serialize() ,
    success: function(data) {
       $('.contact_success').show()
       var html= '<div class="cross-btn" onclick="closemodal()">X</div>'
      $('.contact_success').html( 'Thank you for contacting us! We have received your message. A team member will follow up with you as soon as possible.'+html );
      $('.contact-modal').hide(); 
    },
    error: function(e) {
        console.log(e)
    }
    
    
});
     
  
  return false;
});

  });
  
  // End contact us modal Header
  
  
});