JQUERY: How to create a background Layer and load a new html into foreground? (modal form like)

Question

Hi there,

Trying to find the best way of create an overlap/overlay layer to fill the screen .. and then create a new layer on top on load in some html...

// Show popup - somehting like this..
$("#myBtn").click(function() {
    $("#myDiv").load("myHTMLcode.html");
});

and then i need a way of remove it

Any ideas, is there an easy way of doing this, its similar to the modal form except i wish to load in html rather than show a form..

Answer 1

$("#myDiv").html('');

Answer 2

Have a look at the source for one or more of the following plugins, they implement what you are talking about in different ways, so you should get some idea - failing that, you could just pick one and use it:

• blockUI
• Thickbox
• Facebox
• Fancybox

Answer 3

I'm reasonably certain that you could do this with the dialog widget from jQuery UI. Use the open event handler hook to provide a way to drop your HTML into the dialog container when the dialog is opened.

$('#dialogDiv').dialog({
    modal: true,
    autoOpen: false,
    buttons: { "Ok": function() { $(this).dialog("close"); },
    open: function(event,ui) {
             $(ui).find('#container').load( ... );
          }
});

$('#openButton').click( function() {
   $('#dialogdDiv').dialog('open');
});

If the url needs to be supplied, consider using data()

$('#openButton').click( function() {
   $('#dialogdDiv').data('url','someurl').dialog('open');
});

open: function(event,ui) {
         $(ui).find('#container').load( $('#dialogDiv').data('url') );
      }