Dialog doesn't remove items, but it does *move* them to inside of the dialog, which is hidden at the end of the page. The idea of having the elemnt that you click on also become the dialog content is somewhat strange.
Also, you're not using the .dialog({position:"center"}) - the "option setter" syntax correctly. The way to do it is .dialog("option","position","center") or .dialog("option",{position:"center"});
Consider the following approach, which uses the <a> tag in each LI as the trigger, and then shows the related image inside of a dialog, but instead of moving the actual img tag, it will take the image, clone it to the inside of a brand new element for the dialog, and then get rid of the whole thing entirely when it's closed.
- $(function() {
- $("#portfolio a").click(function(e){
- //when an anchor is clicked
- e.preventDefault(); //prevent the default action on anchors (replaces return false)
- var img = $(this).find("img").clone(), //clone the image inside of it
- d = $("<div>").append(img); //create a new div, append the cloned image inside
-
- //make the new div into a dialog
- d.dialog({
- position:"center",
- close:function() {
- //when the dialog is closed, undo it's dialog functionality, and remove it from the dom
- $(this).dialog("destroy").remove()
- },
- buttons:{
- Ok:function() {
- //For example's sake, give dialog a button that will close it, thus triggering removal
- $(this).dialog("close");
- }
- }
- });
- });
- });
This code is untested but should work as a general approach to solving your problem.