CODEWITHSUNDEEP
javascriptjqueryhtml
Mika H.
Mika H.

Reputation: 4329

Creating dialog via JavaScript

I've tried the following on JSFiddle:

HTML:

<div id="dialog" title="Basic dialog">
  <p>Hello.</p>
</div>

<a href="www.google.com">Link</a>

JavaScript

$(document).ready(function() {
    $( "#dialog" ).dialog({ autoOpen: false }); 
    $(document.body).on('click',"a",function(event){ 
        if ($(this).hasClass('ui-dialog-titlebar-close')) return;
        event.preventDefault();        
        $("#dialog").dialog('open');
    });  
});

I want to achieve this same functionality, but by creating the dialog via JavaScript. That is, I don't want to have the <div id="dialog" ...> in the HTML. How can I do that?

Upvotes: 0

Views: 82

Answers (2)

lebolo
lebolo

Reputation: 2150

You can add your own custom HTML statically and .append() it to the body element or some other div, like in this jsFiddle.

You'll have to position and style it yourself (either by giving it proper CSS classes or by using the style attribute). You can use your browser Developer Tools to take a peek at the jQuery-UI dialog div and "borrow" its CSS for position/style hints =) Although I highly recommend just using the jQuery UI dialog (as it handles the open/close aspects, has the option for a background modal, buttons, etc.). That's what the library is for! ;)

You can also dynamically retrieve the HTML in various ways, e.g. AJAX or many other methods.

Upvotes: 1

claydiffrient
claydiffrient

Reputation: 1306

You can create the dialog on click rather than just showing the dialog. Here's an example on jsfiddle.

Basically you create the DOM node and apply the dialog directly through it. That's what can be done with the $(HTML HERE).dialog() method.

Upvotes: 3

Related Questions