JQUERY: Как создать фоновый слой и загрузить новый HTML на передний план? (модальная форма как)

Question

Попытка найти наилучший способ создания наложения / наложения слоя, чтобы заполнить экран .., а затем создать новый слой сверху при загрузке в некоторых HTML ...

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

и тогда мне нужен способ удалить его

Любые идеи, есть ли простой способ сделать это, он похож на модальную форму, за исключением того, что я хочу загрузить в HTML, а не показывать форму ..

Answer 1

Посмотрите на источник для одного или нескольких из следующих плагинов, они реализуют то, о чем вы говорите, по-разному, так что вы должны получить некоторое представление - в случае неудачи вы можете просто выбрать один и использовать его:

• blockUI
• Thickbox
• Facebox
• FancyBox

Answer 2

Я вполне уверен, что вы могли бы сделать это с помощью диалогового виджета из jQuery UI. Используйте обработчик события открытия open, чтобы обеспечить способ перетаскивания HTML-кода в контейнер диалога при его открытии.

$('#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');
});

Если необходимо указать URL, рассмотрите возможность использования data()

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

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

Answer 3

$ ( "# myDiv") HTML ( '');