dimanche 14 avril 2013

Empêcher fermeture dialog modal de JqueryUI

Avec JQUERYUI il y a la possibilité d'avoir des belle boite de dialog avec du style qui remplace parfaitement la fonction alert() de javascript.  Par contre pour pouvoir l'utilisé sans que l'internaute puisse fermer la fenêtre on doit utilisé quelques astuces.


Voici le code javascript pour empêcher la fermeture d'un popup modal :


<script type='text/javascript'>
   $( "#boite_modal" ).dialog({
       autoOpen: false,
       width: 300,
       modal: true,
       closeOnEscape: false,
       open: function(event, ui) {  $(".ui-dialog-titlebar-close", $(this).parent()).hide(); }
    });

$('.lien_boite').click(function(event){
    $( "#boite_modal" ).dialog("open");
    event.preventDefault();
        });
</script>

Voici le code HTML

<div style='display:none;' id='boite_modal' title='Boite impossible à fermer!'>Désoler vous êtes coincé ici <p>Bouton escape désactiver</p><p>Bouton X -close cacher en CSS</p><p>Essayer F5</p></div>
<a href='#modal' id='lien_boite'>Ouvrir popup modal</a>

Bien sur pour que ça fonctionne vous dever avoir Jquery et JqueryUI sur votre site.

Aucun commentaire:

Enregistrer un commentaire