bootstrap modal popup example

bootstrap modal popup example on load.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome-animation/0.0.10/font-awesome-animation.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/jquery.validate.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.16.0/additional-methods.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div class="header">


  <ul>
     <img class="mascotlogo img-responsive" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/32877/logo-thing.png" width="100" alt="Logo Thing main logo">

  <li>
  <a href="#" class="signupbtn">Sign Up</a>
</li>


  <li><a id="mymodal"href="#" data-toggle="modal" data-target="#myModal">Log In</a></li>
      
  </ul>
</div>





<div class="container parent main">



<center>

<h3 class="title">
<span>Explore</span> posts from local communities with


<svg class="logo" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="6.913 62.035 76.395 20.88">
	  
<a class="hide-on-fallback">
<g>
	<g>
		<path fill="#ffffff" d="M22.406,65.271l-7.161,14.701L8.242,65.9l3.162-1.243l3.839,8.283l3.933-8.388L22.406,65.271z"/>
		<path fill="#ffffff" d="M34.532,74.387c-0.269,1.799-0.998,3.231-2.189,4.296c-1.191,1.065-2.687,1.598-4.485,1.598
			c-1.784,0-3.271-0.536-4.462-1.609s-1.945-2.501-2.26-4.284h2.958c0.221,0.947,0.655,1.692,1.302,2.236
			c0.647,0.545,1.459,0.817,2.438,0.817c1.01,0,1.818-0.256,2.426-0.769c0.607-0.514,1.038-1.275,1.29-2.285H34.532z...

CSS

@media(min-width:631px)
{
  
  .buildingsolo {display:block!important;}
   .buildingtotal {display:none!important;}
   
   
#animation{
 position:relative;
}


.toprow{top:0;}

.bottomrow{top:0; margin-top:15%;}

.bubble {
   height: 100px;
  width: 100px;
  position:absolute;
  opacity:0;
}

#animation div:nth-of-type(1) { 
    
    -webkit-animation: fadein 6s ease-in-out -8s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out -8s infinite alternate;
    animation:fadein 6s ease-in-out -8s infinite alternate;
}
#animation div:nth-of-type(2) { 
    
    -webkit-animation: fadein 6s ease-in-out 8s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 8s infinite alternate;
    animation: fadein 6s ease-in-out 8s infinite alternate;

}
#animation div:nth-of-type(3) { 
    
    -webkit-animation: fadein 6s ease-in-out 16s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 16s infinite alternate;
    animation: fadein 6s ease-in-out 16s infinite alternate;
	
}

#animation div:nth-of-type(4) { 
    
    -webkit-animation: fadein 6s ease-in-out 24s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 24s infinite alternate;
    animation:fadein 6s ease-in-out 24s infinite alternate;
}
#animation div:nth-of-type(5) { 
    
    -webkit-animation: fadein 6s ease-in-out -16s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out -16s infinite alternate;
    animation: fadein 6s ease-in-out -16s infinite alternate;

}
#animation div:nth-of-type(6) { 
    
    -webkit-animation: fadein 6s ease-in-out 40s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out 40s infinite alternate;
    animation: fadein 6s ease-in-out 40s infinite alternate;
	
}


#animation div:nth-of-type(7) { 
    
    -webkit-animation: fadein 6s ease-in-out -24s infinite alternate; 
    -moz-animation: fadein 6s ease-in-out -24s infinite alternate;
    animation:fadein 6s ease-in-out -24s infinite alternate;
	

}
#animation div:nth-of-type(8) {...

JavaScript

$('.login-form').validate ({
        // validation rules for registration form
    errorClass: "error-class",
    validClass: "valid-class",  
    
        rules: {
            username: {
                required: true,
                minlength: 3,
                maxlength: 40
            },

          password: {
                required: true,
                minlength: 7,
                maxlength: 20
            }
            },
            
        messages: {
            username: {
                required: "Please enter your username or email address",
                minlength: "Usernames can't be shorter than three characters",
                maxlength: "Usernames or emails must be shorter than forty characters."
            },
                       password: {
                required: "Please enter your password",
                minlength: "Passwords can't be shorter than seven characters",
                maxlength: "Passwords must be shorter than forty characters."
            },
            
        	    highlight: function(element, errorClass) {
        $(element).removeClass(errorClass);
    }    
        },
        
  submitHandler: function() {  
            $('#noenter').show();   

        }  
    });
    
    
    $.validate({
    onError : function(){
        $('.input-group.error').find('.help-block.error').each(function() {
            $(this).closest('.form-group').append($(this));
        });
    }
});