CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-dialog
αƞjiβ
αƞjiβ

Reputation: 3246

Multiple level of jQuery Dialog

I am trying to implement multiple level of jQuery Dialog with modal behavior. I have main page which open up first dialog box from where second dialog box can be open all both should be modal box.

First issue is I am getting error on fiddle when clicking main page link and second its not creating dialog as required.

Fiddle

Upvotes: 0

Views: 136

Answers (1)

Jeff Clarke
Jeff Clarke

Reputation: 1397

A bunch of things going on:

  1. In the jsFiddle, you need to add jQuery UI and a theme as external resources. Selecting just the jQuery library is not enough. jQuery UI Dialog is part of the jQuery UI library, not part of the jQuery core library.

  2. Since your click events are on <a> tags, you need to cancel their default behaviour. Make a click handler for your <a> tags, and cancel the default behaviour first before doing anything else:

    <a href="#" id="clickForGold">Gold</a>

$("#clickForGold").on("click", function(e) {
  e.preventDefault();   <--- this stops the link from navigating
  //now do other stuff
});

  3. Set up your dialogs at page load, and then open them when you need to. Use the autoOpen:false parameter to keep them from opening when the page loads. Open them as follows:

    $("dialog-id").dialog("open");

  4. Don't open a modal over a modal. It's extremely poor for usability. Close the first one before opening the second one:

    function clickForSecond() {
  $("dialog-id-first").dialog("close");
  $("dialog-id-second").dialog("open");
}

A working example: https://jsfiddle.net/5ucat3f7/1/

Upvotes: 1

Related Questions