Can i open a modal window from file A and displayi

Question

I am studying the Jquery modal-form example :

http://jqueryui.com/dialog/#modal-form

Is it possible to open a modal window from file A and displaying an existing file B on the modal window ?

Thank's in advance

Answer 1

You could do something like this:

HTML:

<a href="#" id="showDialog">Show dialog</a>
<div id="dialog"></div>

jQuery:

$(function() {
    $("#dialog").load("fileb.html").dialog({autoOpen: false});
    $('#showDialog').click(function() {
        $("#dialog").open();
        return false;
    });
});

If fileb.html is a full web page, you may want to append an iframe to $("#dialog") instead. Additionally, you could do the append or the load in the open event of the dialog.

Alternate jQuery that uses the open event:

$(function() {
    $("#dialog").dialog({
        autoOpen: false,
        open: function() {
            $(this).load("fileb.html");
        }
    });

    $('#showDialog').click(function() {
        $("#dialog").open();
        return false;
    });
});

Answer 2

Isn't there a way to target a filename that has been defined in the clickable link or button.. instead of having to define it in the scripting itself? for example... When a link has something like :

 <a href="#" class="CLICKCLASS" name="filename">click me</a>

The code to trigger the modal :

 $(function() {
      $(".CLICKCLASS").load("INFO_FROM_NAME_ATTRIBUTE").dialog({autoOpen: false});
      $('.CLICKCLASS').click(function() {
          $("#dialog").open();
          return false;
      });
  });

I don't know which attribute could be used for it, but this would make the script open to use in every link or button that needs to load a modal box

Answer 3

HTML

<div id="dialog_form"></div>

jQuery

$('#create-user').click(function() {
    $('#dialog_form').dialog(
    {
        open: function() {
            $(this).load('form_new.html');
        },
        modal: true
    }
    );
    $('#dialog-form').dialog('open');
});