0

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

Ângelo Rigo
  • 2,039
  • 9
  • 38
  • 69
  • Are you talking about opening a modal and then loading the contents of that modal from a different file? I'm sure you could use the `open` event to then make a `.load()` or `.ajax()` call. – DevlshOne Aug 29 '13 at 14:34
  • Yes i need the content from a diferent file just like using an iframe inside the modal . – Ângelo Rigo Aug 29 '13 at 14:59

3 Answers3

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;
    });
});
zigdawgydawg
  • 2,046
  • 13
  • 10
1

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');
});
DevlshOne
  • 8,357
  • 1
  • 29
  • 37
  • I try to add this code inside a call to a button click `$( "#create-user" ) .button() .click(function() { $('#dialog-form').dialog({ open: function() { $(this).load('form_new.html'); }, modal: true }); });` The button now is not opening the modal, may it be some syntax error? sorry i am new to Jquery – Ângelo Rigo Aug 29 '13 at 20:11
  • 1
    @ÂngeloRigo Try this. – DevlshOne Aug 30 '13 at 00:22
  • The only code who works to me was : `$( "#create-user" ) .button() .click(function() { $( "#dialog-form" ).dialog( "open" ); });` – Ângelo Rigo Aug 30 '13 at 13:25
  • I try to adapt your sugestion but did not open the modal window : ` $( "#create-user" ) .button() .click(function() { $("#dialog-form").dialog({ autoOpen: false, open: function() { $(this).load("outro.html"); } }); $('#showDialog').click(function() { $("#dialog-form").open(); return false; }); });` – Ângelo Rigo Aug 30 '13 at 13:27
1

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

George
  • 111
  • 1
  • 7