javascript - Modal Window with background blur -

i've following mockup

to left list of names , arrow (currently i've shown on todd , patricia, available on each name). on clicking arrow i'm supposed open modal window.

currently i'm opening jqueryui dialog on click of arrow.

is possible achieve ui shown in image using modal dialog?

is possible click on hasen, todd's arrow , load modal dialog new data without closing modal dialog?

edit:

to achieve ui shown in screenshot have provided, selected li sits on top of overlay (modal) , "connects" dialog, have following:

1. position dialog next clicked li, , disable dragging & resizing.
2. style selected li extend further (width) , apply position: relative + high z-index sits on top of overlay.
3. do css magic, good! :-)

i've written updated jsfiddle demonstrate i've described above. i'm confident can proceed on own here. personally, think looks neat, , identical screenshot.

result of jsfiddle demo: http://jsfiddle.net/losnir/dmp94/3/embedded/result/
(see code)

---

(original answer:)

yes, possible. first, create dialog object. bind .click event handler on list of names, callback opens dialog , set's contents.

here 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, 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 contents using $.get() or $.ajax(), or in other way want.

here quick way "customize" jquery ui theme: http://jqueryui.com/themeroller/
can use css style .ui- classes liking on own.

here jsfiddle demo: http://jsfiddle.net/losnir/dmp94/