0

我的问题是当我包含日历插件时我无法关闭模型 jquery pop。这是我的代码,请帮助我。

 <html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Dialog - Modal form</title>

 <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <style>
    body { font-size: 62.5%; }
    label, input { display:block; }
    input.text { margin-bottom:12px; width:95%; padding: .4em; }
    fieldset { padding:0; border:0; margin-top:25px; }
    h1 { font-size: 1.2em; margin: .6em 0; }
    div#users-contain { width: 350px; margin: 20px 0; }
    div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
    div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
    .ui-dialog .ui-state-error { padding: .3em; }
    .validateTips { border: 1px solid transparent; padding: 0.3em; }
    #fade { /*--Masque opaque noir de fond--*/
    display: none; /*--masqué par défaut--*/
    background: #000;
    position: fixed; left: 0; top: 0;
    width: 100%; height: 100%;
    opacity: .80;
    z-index: 9999;
}
.popup_block{
    display: none; /*--masqué par défaut--*/
    background: #fff;
    padding: 20px;
    border: 20px solid #ddd;
    float: left;
       /* font-size: 1.2em;*/
       font-size: 0.9em;
    position: fixed;
    top: 50%; left: 50%;
    z-index: 99999;
    /*--Les différentes définitions de Box Shadow en CSS3--*/
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    /*--Coins arrondis en CSS3--*/
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
img.btn_close {
    float: right;
    margin: -55px -55px 0 0;
}
/*--Gérer la position fixed pour IE6--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}   /*<script language="javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>*/    
form label {
float: left;
width: 100px;
margin: 3px 0px 0px 0px;
font: 14px verdana, sans-serif;
font-weight : bold;
}
form input {
margin: 3px 3px 0px 0px;
border: 1px #999 solid;
}     
body
{
 font: 12px verdana, sans-serif;

 margin: 10px;
 padding: 0;

  font-weight : bold;
  background: grey;

}         
.ui-datepicker { width: 17em; padding: .2em .2em 0; z-index:9000; }
  </style>
  <script>
      $(function() {
    $("#datepicker").datepicker();
  });
  </script>
</head>
<body>
    <a href="#?h=900" rel="popup_name" class="poplight"><img src="ajouter.png" alt="AJOUTER"></a>   
    <div id="popup_name" class="popup_block">

 <form id="formulairePAIEMENT"  onkeypress="return keypress(event)"  >
   <p>REMARQUE:N'introduisez le monatant et l'échéance rééls que si reéllement ce réglement a eu lieu</p>       
           <div iddiv> </div>
                <table border="0" cellspacing="10" >

                    <tbody>
        <tr>
       <td><label for="CodeFournisseur">Date</label>

           <input type="text" name="datepicker" id="datepicker"  onkeypress="entrer1(event);" /><br/>
       </td>
           <td><label for="prenomClient">Mode de paiement</label> 

 </tr>
 <tr>
 <td><label for="Activite">Comptabilisé</label>
        <input type="text" name="Comptabilise"  id="Comptabilise" onkeypress="entrer3(event);"  maxlength="50"/></td>
 <td><label for="adresse"> Montant théo </label> <input type="text" name="Montanthe" id="Montanthe" value="0" onkeypress="entrer4(event);"  maxlength="50" onkeyup="testnombre2();"    /></td>

 <td> <label for="Pays"> Montant réel</label>
     <input type="text" name="Montantreel"  id="Montantreel" size="20" value="0" maxlength="20" onkeypress="entrer5(event);" onkeyup="testnombre1();"  />  </td>

   </tr>
   <tr>
<td><label for="Ville"> Ech.Théorique </label>
 <input type="text" name="echtheo" id="echtheo"  onkeypress="entrer6(event);" size="20" maxlength="20"/></td>
<td><label for="codePostal">Ech.Réelle</label>
<input type="text" name="echreel" id="echreel" onkeypress="entrer7(event);" maxlength="6" /></td>
<td><label>Banque</label>
  </tr>             
       <tr>


   <td><label for="rc"> Emargement </label>
   <input type="text" name="Emargement " id="Emargement"  onkeypress="entrer11(event);" size="20" maxlength="20"/></td>
                        </tr>                      
   <tr>
   <td><label for="Ville">Libéllé</label>
   <input type="text" name="Libelle"   size="20" id="Libelle"  maxlength="20"/></td>
   </tr>    
   </tbody>
   </table>
    <div id="iddiv"> </div>
     <br/>  
     <input type="text" name="idpaye" value="" hidden="true" />
   <input  type="button" name="action" value="Enregistrer" onclick="enregistrer();" />   

        </form>  

     </div>

 <script>
    $(document).ready(function() {
        $('a.poplight[href^=#]').click(function() {
    var popID = $(this).attr('rel'); //Trouver la pop-up correspondante
    var popURL = $(this).attr('href'); //Retrouver la largeur dans le href

    //Récupérer les variables depuis le lien
    var query= popURL.split('?');
    var dim= query[1].split('&amp;');
    var popWidth = dim[0].split('=')[1]; //La première valeur du lien

    //Faire apparaitre la pop-up et ajouter le bouton de fermeture
    $('#' + popID).fadeIn().css({
        'width': Number(popWidth)
    })
    .prepend('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');

    //Récupération du margin, qui permettra de centrer la fenêtre - on ajuste de 80px en conformité avec le CSS
    var popMargTop = ($('#' + popID).height() + 80) / 2;
    var popMargLeft = ($('#' + popID).width() + 80) / 2;

    //On affecte le margin
    $('#' + popID).css({
        'margin-top' : -popMargTop,
        'margin-left' : -popMargLeft
    });

    //Effet fade-in du fond opaque
    $('body').append('<div id="fade"></div>'); //Ajout du fond opaque noir
        //
        $("#ui-datepicker-div").css("z-index", "9999");  
    //Apparition du fond - .css({'filter' : 'alpha(opacity=80)'}) pour corriger les bogues de IE
    $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn();

    return false;
});

//Fermeture de la pop-up et du fond
$('a.close, #fade').live('click', function() { //Au clic sur le bouton ou sur le calque...
    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').close(); 
  //            //...ils disparaissent ensemble
              location.reload(true);
    });
    //return false;
});



    });

</script>   
</body>
</html>

我可以打开弹出窗口,日历,我可以选择日期,但是当我尝试关闭我的弹出模型时,它会阻塞,请尝试并帮助因为我认为问题出在弹出模式插件上。

4

1 回答 1

0

如果在将单击事件添加到弹出窗口之前将其绑定到关闭按钮 /fade,则它可以工作:请参阅jsfiddle.net/8Hu6g/1

var close_btn = $('<a href="#" class="close"><img src="close_pop.png" class="btn_close" title="Fermer" alt="Fermer" /></a>');

close_btn.bind('click', function() { //Au clic sur le bouton ou sur le calque...

    $('#fade , .popup_block').fadeOut(function() {
        $('#fade, a.close').close(); 
        //            //...ils disparaissent ensemble

              location.reload(true);
      });
      //return false;
    });

    //Faire apparaitre la pop-up et ajouter le bouton de fermeture
    $('#' + popID).fadeIn().css({
        'width': Number(popWidth)
    })
    .prepend(close_btn);
于 2013-08-06T11:13:08.130 回答