title: How to login with bootstrap modal?
body: <p>I am trying to develop a simple login with bootstrap modal and it is not working, so if any one help could me I would be very grateful for their kindness.</p>
  
  <p>I don't have much knowledge about JavaScript or Bootstrap.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function login(){
          
          var username=document.getElementsByName("username").value;
          var password=document.getElementsByName("password").value;
          if(username.value == null &amp;&amp; password.value == null){
               $('.alert').show();
              
          }
           else{
         document.getElementById("wrongpassword").innerHTML="Thank u very much"; 
           }
      }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.alert{
    display:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="modal fade" id="modal1"  role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
      &lt;!-- Modal content--&gt;
        &lt;div class="modal-content"&gt;
          &lt;div class="modal-header"&gt;
            &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
            &lt;h3 class="modal-title text-center" style="color:#333366;"&gt;&lt;strong&gt;LOGIN TO FOOD SAVIOR&lt;/strong&gt;&lt;/h3&gt;
          &lt;/div&gt;
          &lt;div class="modal-body"&gt;
    &lt;div class="form-group"&gt;
    &lt;input type="text" placeholder="Username" name="username" class="form-control" style="height:40px;" required&gt;
     &lt;/div&gt;
     &lt;div class="form-group"&gt;
     &lt;input type="password" placeholder="Password" name="password" class="form-control" style="height:40px;" required&gt;
     &lt;/div&gt;
     &lt;div class="text-center"&gt;
     &lt;input type="submit" value="LOGIN" name="login_btn" id="login_btn" onclick="login()" class="btn btn-primary" style="background-color:#333366;height:40px;color:#ffffff"&gt;
     &lt;/div&gt;
              
              &lt;div class="alert alert-danger alert-dismissable fade in"&gt;
                  &lt;button type="button" class="close" data-hide="alert"&gt;&amp;times;&lt;/button&gt;
                      &lt;p&gt; You Entered Wrong Detail. Enter Again
                      &lt;/p&gt;
              &lt;/div&gt;
              
              &lt;p id="wrongpassword"&gt;&lt;/p&gt;
    &lt;h4 class="text-center"&gt;&lt;a href="#"&gt;Forget Password&lt;/a&gt;&lt;/h4&gt;
    &lt;/div&gt;
          &lt;div class="modal-footer"&gt;
    &lt;h4 class="text-center"&gt;Don't have Account yet? Let's &lt;a href="#modal2" data-toggle="modal"&gt;Sign up&lt;/a&gt; its fun and easy!&lt;/h4&gt;
              &lt;div class="text-center"&gt;&lt;button type="button" class="btn btn-success" data-dismiss="modal"&gt;&lt;p&gt;Close&lt;/p&gt;&lt;/button&gt;
          &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        
      &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;a href="#modal1" data-toggle="modal"&gt;
               &lt;h5&gt;Login&lt;/h5&gt;&lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>strong text</strong></p>