CODEWITHSUNDEEP
javascriptjqueryjquery-uimodal-dialogjquery-ui-dialog
SDS
SDS

Reputation: 828

Modal Window with background blur

I've the following mockup

enter image description here

To the left is a list of names and an arrow (currently I've shown this on Todd and Patricia, but this will be available on each name). On clicking the arrow I'm supposed to open a Modal Window.

Currently I'm opening the JQueryUI dialog on click of the arrow.

Is it possible to achieve the UI as shown in the image using the modal dialog?

Is it possible to click on Hasen, Todd's arrow and load the modal dialog with new data without closing the modal dialog?

Upvotes: 1

Views: 1859

Answers (1)

losnir
losnir

Reputation: 1171

Edit:

To achieve the UI shown in the screenshot you have provided, where the selected li sits on top of the overlay (modal) and "connects" to the dialog, you have to do the following:

  1. Position the dialog next to the clicked li, and disable dragging & resizing.
  2. Style the selected li to extend further (width) and apply position: relative + a high z-index so it sits on top of the overlay.
  3. Do some CSS magic, so it will look good! :-)

I've written an updated JSFiddle to perfectly demonstrate what I've described above. I'm confident that you can proceed on your own from here. Personally, I think it looks neat, and almost identical to your screenshot.

Result of JSFiddle Demo: http://jsfiddle.net/losnir/Dmp94/3/embedded/result/
(see code)

(original answer:)

Yes, this is possible. First, you create a Dialog object. Then bind a .click event handler on your list of names, with a callback that opens the dialog and set's the contents.

Here is an exmaple:

[JavaScript] 
var myDialog = $("#dialog").dialog({
    autoOpen: false
})

$("ul#names > li").click(function() {
    var myName = $(this).data("name");

    /* Open Dialog */
    if(myDialog.dialog("isOpen") !== true)
        myDialog.dialog("open");

    /* Change dialog title */
    myDialog.dialog("option", "title", myName)

    /* Change dialog contents */
    myDialog.find("span.name").text(myName);
    myDialog.find("div.content").html("Set content here!");
})
[HTML] 
<div id="dialog">
    <p>Hello, my name is: <span class="name"></span></p>
    <div class="content">
        <!-- Content goes here -->
    </div>
</div>

<ul id="names">
    <li data-name="Hasen"><a href="#">Hasen</a></li>
    <li data-name="Todd"><a href="#">Todd</a></li>
    <li data-name="Patricia"><a href="#">Patricia</a></li>
</ul>

You can set the contents using $.get() or $.ajax(), or in any other way you want.

Here is a quick way to "customize" a jQuery UI theme: http://jqueryui.com/themeroller/
You can always use CSS to style the .ui- classes to your liking on your own.

Here is a JSFiddle Demo: http://jsfiddle.net/losnir/Dmp94/

Upvotes: 2

Related Questions