1

Code snippet for using jQueryUI dialog is:

 $(".upload_photos").bind('click', function (e) {
     e.preventDefault();
     var dialog = $(this);
     dialog.dialog({
         width:860,
         height:560,
         autoOpen: false
     });
     dialog.dialog('open');
 });

HTML markup:

<div class="upload_photos">
    <img src="source" />
</div>

When I click on the 'upload_photos' div, the image shows up in the dialog window but disappears from the background page.

  1. How to keep it visible in the background page at the same time?

  2. When the image will appear on the dialog box, I want to appear it in different dimensions (width and height). How to do that?

EDIT:

Clicking on the 'upload_photos' div multiple times creates multiple dialogs. But I want to create no dialog for the later clicks. How to do that?

EDIT2:

I have a button beneath the image of the "upload_photos" div. I make use of clone (var dialog = $(this).clone();). I get that button in that dialog box too. But If i click on the button the tagging starts on the image in the webpage, not on the image of the dialog box.

What is the solution?

EDIT3:

The tagging script with the help of jquery makes selection on the 'upload_photos' div. When it is being cloned to the dialog, then the script still finds the selection in the webpage, not in the dialog box. This might be related (?) with event handling or what? I tried with 

var dialog = $(this).clone(true);

but could not solve. How to divert the attention of the jquery selection to the dialog window?

EDIT4"

If I use var dialog = $(this) instead of var dialog = $(this).clone(true); then the tagging takes place on the dialog box, but the image disappears from the webpage.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Istiaque Ahmed
  • 6,072
  • 24
  • 75
  • 141
  • provide more core to help you with edit 2. your html and button's javascript would be great. – falsarella Jan 06 '12 at 14:05
  • may we have a chat ? probably tomorrow plz? if u can kindly do, then atwhich time? I am from south asia, Bangladesh – Istiaque Ahmed Jan 06 '12 at 14:07
  • try to create the overlay div instead of cloning, or try yourself learning step by step, or provide more code (but it's getting to be a too localized question). – falsarella Jan 09 '12 at 11:13

1 Answers1

0

1) you are using the page div as the dialog, try this:

var dialog = $(this).clone();

2) to img fixed dimension on the dialog:

$("img", dialog).addClass('fixedSize');

img.fixedSize {
    width: 500px;
    height: 500px;
}

3) to block background from clicking:

dialog.dialog({
    width:860,
    height:560,
    autoOpen: false,
    modal: true
});

Read dialog documentation and options for more info and configuration:

falsarella
  • 12,217
  • 9
  • 69
  • 115
  • i have the dialog box's width and height(860, 560) fixed. I want the image (what ever size(suppose 200,100) it originally has) to be of a fixed dimension i.e. 500,500. how to do that? – Istiaque Ahmed Jan 06 '12 at 11:46
  • @IstiaqueAhmed don't you have an in your html inside the .upload_photos div? if so, just add the class to your img and the css to your style. – falsarella Jan 06 '12 at 13:14
  • yes i have. but the css will have the dimension appiled on the images of both the webpage and the dialog box. The webpage image will have a dimension while the dialog box image will have another. what to do for that? – Istiaque Ahmed Jan 06 '12 at 13:16
  • @IstiaqueAhmed, your html img can't have the initial fixedSize class. then, add it just to the dialog img's when it is created, as coded in my the edited answer. – falsarella Jan 06 '12 at 13:32