button that would load an external html as a layover?

Question

I'm trying to create a button that once clicked, an overlay window would open up, containing HTML from an external file.

I've tried to combine this code with the code here but something is wrong I guess:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Dialog - Animation</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.9.1.js"></script>
  <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">

  <script>
      $( ".selector" ).dialog({
          open: function(event, ui) {
              $('#divInDialog').load('popup.html', function() {
                  alert('Load was performed.');
              });
          }
      });

      $( "#opener" ).click(function() {
          $( "#selector" ).dialog( "open" );
      });
  </script>


</head>
<body>

<div class="selector"/>
<div id="divInDialog"></div></div>

<button id="opener">Open Dialog</button>


</body>
</html>

`$( "#selector" ).dialog( "open" );` should be `$( ".selector" ).dialog( "open" );` — The Alpha, Feb 19 '14 at 00:39

The Alpha · Accepted Answer · 2014-02-19T01:05:41.677

2

Try this: (Example)

HTML: you have used <div class="selector"/>

<div class="selector">
    <div id="divInDialog"></div>
</div>
<button id="opener">Open Dialog</button>

JS:

$(function(){
    $( ".selector" ).dialog({
        'autoOpen':false,
        open: function(event, ui) {
        $('#divInDialog').load('popup.html', function() {
           alert('Load was performed.');
         });
       }
    });

    $( "#opener" ).click(function() {
        $( ".selector" ).dialog( "open" );
    });
});

You need to use 'autoOpen':false to stop automatic popup load at initialization. Also, you have used $( "#selector" ).dialog( "open" ); but it should be . instead of # because # means id while . means a class and you have <div class="selector">.

Also, always put your jQuery code inside $(document).ready(function(){ //... }) so those code will run when DOM is ready, here I've used a shortcut but no problem.

edited Feb 19 '14 at 01:05

answered Feb 19 '14 at 00:49

The Alpha

143,660
29
287
307

Good catch on the selectors. However I don't think this will work because the anonymous function executes as soon as it loads but the elements are not on the page yet. – mcbex Feb 19 '14 at 00:55
thanks, both answers seem to work, so I can't tell the difference – jayjay Feb 19 '14 at 00:57
@jayjay, Read my answer, everything I've explained and `$(function(){ })` is just a shortcut of `$(document).ready(function(){ })`. – The Alpha Feb 19 '14 at 00:59
@jayjay, Also you have invalid `HTML`, I've mentioned in my answer. – The Alpha Feb 19 '14 at 01:00
@SheikhHeera maybe I'm wrong but jsfiddle wraps your js in a load handler if you specify 'onload' in the options. See this link: http://stackoverflow.com/questions/19203922/jsfiddle-wrap-in-onload. And $(function() { etc is not a shortcut for $(document).ready(function() { etc – mcbex Feb 19 '14 at 01:00
@mcbex, You should check my fiddle and remove the `$(...)` and then see what happens. – The Alpha Feb 19 '14 at 01:02
@mcbex, It's ok, no problem at all. – The Alpha Feb 19 '14 at 01:06

mcbex · Answer 2 · 2014-02-19T00:52:01.090

1

Your 'opener' and 'selector' elements aren't in the DOM yet when you try to reference them. Try wrapping all your js in the callback to the documents ready event: http://api.jquery.com/ready/

$(document).ready(function() {
    $( ".selector" ).dialog({
        autoOpen: false,
        open: function(event, ui) {
            $('#divInDialog').load('popup.html', function() {
                alert('Load was performed.');
            });
        }
    });

    $( "#opener" ).click(function() {
        $( ".selector" ).dialog( "open" );
    });
});

edited Feb 19 '14 at 00:52

answered Feb 19 '14 at 00:40

mcbex

446
4
8

that seems to work, thanks, but why does the popup show as soon as i open the page, rather than only when i click the button? – jayjay Feb 19 '14 at 00:49
1

set autoOpen to false on the dialog: http://api.jqueryui.com/dialog/#option-autoOpen (it is true by default) – mcbex Feb 19 '14 at 00:50
1

I edited the code to add the autoOpen: false example – mcbex Feb 19 '14 at 00:52

button that would load an external html as a layover?

2 Answers2