JQuery UI Boîte de dialogue modale personnalisée

Question

J'essaie de créer un effet contextuel modal à l'aide de JQuery UI 1.7.2 Fondamentalement, j'ai besoin d'un widget d'erreur normal pour apparaître avec le reste de la page bloquée. Nous utilisons IE6 au travail et il n'y a aucun moyen de mettre à niveau. Actuellement, j'essaie cela.

<div id="errorPopup" style="display: none;"> 
    <div class="ui-overlay"> 
    <div class="ui-widget-overlay"></div> 
    <div class="ui-widget-shadow ui-corner-all" style="width: 302px; height: 300px; position: absolute; top: 1em; left: 1em;"></div> 
    </div> 
    <div style="position: absolute; left: 35em; top: 30em; padding: 10px;" class="ui-state-error ui-widget ui-widget-content ui-corner-all"> 
    <div class="ui-state-error ui-dialog-content ui-widget-content" style="background: none; border: 0;"> 
     <p> 
     <span class="ui-icon ui-icon-alert" style="float: left; margin-right: 0.3em;"></span> 
     <strong>Opps:</strong> That wasn't meant to happen. 
     </p> 
    </div> 
    </div> 
</div> 

Veuillez noter l'utilisation des classes JQuery UI. Cela ne fonctionne pas et je ne sais pas vraiment pourquoi. J'essaie d'éviter d'écrire mes propres css et js pour obtenir l'effet comme la raison pour passer à JQuery UI était pour qu'il gère ses affaires pour moi.

Toutes les suggestions sont les bienvenues!

Answer 1

Je serais intéressé de savoir pourquoi l'interface utilisateur de jQuery ne fonctionne pas.

Vous pouvez essayer le plugin suivant. Jetez un oeil à la page de démonstration pour voir si cela convient http://malsup.com/jquery/block/#

Answer 2

Je pense que ce que vous essayez de faire, c'est d'immitiser manuellement la boîte de dialogue. Je suggère d'exécuter la boîte de dialogue en utilisant javascript, jQuery fera quelques trucs funcky pour le réparer pour IE6.

Voici la version simple:

<div id="dialog" title="Dialog Title" style="display:none;"></div> 
<script> 
    $(document).ready(function(){ 

     $('#dialog').dialog({ modal: true, 
       bgiframe: true, 
       open: function(){} 
      });  
     }); 
</script> 

Si vous voulez le faire manuellement il quelque chose comme:

<div class="ui-widget-overlay" style="width: 1263px; height: 2253px; z-index: 1001;"></div> 
<div style="display: block; position: absolute; overflow: hidden; z-index: 1002; outline: 0px none; height: auto; width: 330px; top: 169px; left: 463px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable" tabindex="-1" role="dialog" aria-labelledby="ui-dialog-title-dialog"><div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix" unselectable="on" style="-moz-user-select: none;"><span class="ui-dialog-title" id="ui-dialog-title-dialog" unselectable="on" style="-moz-user-select: none;">Make an enquiry</span><a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" unselectable="on" style="-moz-user-select: none;"><span class="ui-icon ui-icon-closethick" unselectable="on" style="-moz-user-select: none;">close</span></a></div><div style="height: 242px; min-height: 117px; width: auto;" id="dialog" class="ui-dialog-content ui-widget-content">ERROR STUFF</div> 

Comme vous pouvez le voir, il est très salissant!

Oh, et une chose: Assurez-vous d'inclure le « jquery.bgiframe.min.js » et « bgiframe: true » car elle permet la boîte de dialogue de fonctionner dans IE6