title: Background of my modal doesn't change
body: <p>I try to use a modal using Iframe for connexion / inscription on my web site </p>
  
  <p>Html : </p>
  
  <pre><code>&lt;div class="modal" id="ays-popin-connexion" aria-hidden="true"&gt;
      &lt;div class="modal-body" aria-hidden="true"&gt;
          &lt;iframe src="***" id="iframe1" class="popup" frameborder="0" aria-hidden="true"&gt;
          &lt;/iframe&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS : </p>
  
  <pre><code>.modal{
          height:650px;
          width:950px;
          left:30%;
          top:10%;
          opacity: 0.8;
          z-index: 4589365;
      }
      .modal-body{
          height:650px;
          width:950px;
          padding:0;
          margin:0;
          max-height:2000px;
      }
      .popup{
          height:650px;
          width:950px;
          padding:0;
          margin:0;
      }
  </code></pre>
  
  <p>Javascript : </p>
  
  <pre><code>window.onload = function()
  {  
      $("#ays-menu a").on("click",function(event){
            if(this.text == "CONNEXION");
            {
            console.log($(this).attr('href'));
           $("#ays-popin-connexion").toggle(1500);
             console.log(this);
            }
       });
  }
  </code></pre>
  
  <p>My modal appear as you can see here : <a href="http://i.imgur.com/eoURTYP.png" rel="nofollow">http://i.imgur.com/eoURTYP.png</a></p>
  
  <p>But i want the background outside of my modal to become fade or grey and i have really no idea how to change it </p>
  
  <p>By the way an other question how can i tell to my modal that when i click outside of my modal the modal close because i supposed this was native </p>
  
  <p>If you want to try by yourself just go to dev.appyourself.com and click on the red button "connexion" . </p>