JQuery UI Custom modal dialog

Question

Hi, I'm trying to create a modal popup effect using JQuery UI 1.7.2 Basically I need a normal Error widget to pop up with the rest of the page blocked out. We're using IE6 at work and there are no ways to upgrade. Currently I'm trying this.

<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>

Please note the use of the JQuery UI classes. This doesn't work and I don't really know why. I am trying to avoid writing my own css and js to get the effect as the reason for moving to JQuery UI was for it to handle his stuff for me.

Any suggestions welcome!

Answer 1

I would be interested as to why the jQuery UI doesn't work.

You could try the following plugin. Take a look at the demos page to see if it suits http://malsup.com/jquery/block/#

Answer 2

I think what you trying to do immitate the dialog presention manually. I would suggest running the dialog using javascript, jQuery will do some funcky stuff to fix it for IE6.

Here is the simple version:

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

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

If you want to do it manually it will be something like:

<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>

As you can see it is very messy!

Oh, and ONE MORE THING: Make sure you include the 'jquery.bgiframe.min.js' and 'bgiframe: true' as it enables the dialog to function in IE6