I don’t know what you’re trying to do with the .animate() stuff since you have show and hide properties set in the dialog options. What effect are you trying to achieve?
Ok then, no problem.
Can you provide enough HTML, CSS and JS code (no PHP) that I can copy and paste to my computer so as to recreate your problem?
A self-contained example in other words.
You need to have a dialog div somewhere on the page.
<div id="dialog"></div>
You also can’t define the width and height of the dialog by CSS. That’s left up to the jQuery-UI library.
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 400, // Here
height: 300, // And Here. px is default and won't be valid if you try to use "300px" instead of just "300"
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$("#opener").click(function () {
$('#dialog').dialog('open');
});
If you include this in your page, exactly how it is, with jQuery and jQuery-UI it will work.
Also note the e.preventDefault(); which will prevent the default behavior of your your link <a href=“#”></a> tag.
I do not know what the state var is, so I removed it. The .animate() is not valid syntax, so that was removed too. I’m still not sure what effect you’re trying achieve with it, since you’re already using explode and blind animation effects in your dialog box. If you describe it a little better, maybe I can help.
Remember, you’re using jQuery-UI which is a frontend framework. All it’s CSS and styling is handled by the jQuery-UI css file. If you want to change any effects further, you need to override those styles in your own css. (you should leave the base css alone)
Hi, actually is it possible to show me on jsfiddle a code that will open up a dialog box displaying some text when clicked?
The internal div I can try to work on it later…
Hi mawburn, I tried but I don’t want the text “This is in your dialog” to appear on my page, I only want it to show within the dialog box when I click on the link…
That’s handled by the jQuery UI library when you set the .dialog() options inside of $(document).ready(function(){}); . Anything inside that div only shows up inside the dialog when it’s opened. As Pullo said, the library is not in the JSFiddle, you can include it there or stick that code into your own page and try it. There’s no easy way to put the jQueryUI library into jsFiddle, since there’s no hosted link (that I know of) and it requires a CSS file and image files. Your best bet is to stick it in your own page and try it.
I finally got it to show the dialog box! Thanks for your help! =)
Now comes the tricky part… I have a table which will loop through and display the images in each cell… When I click on each image, I want a different dialog box to show up…
How can I do this with JS?
Because I will always be opening with the id=opener, able I am to pass something like id=opener1, id=opener2 and so on so that if image 1 is clicked, it opens opener1 and when image 2 is clicked, it opens opener2?
I would populate the data inside the dialog div wit the data you want. Or if its just a single value, you can take advantage of the html data attribute.
I can’t help with code or links cause I’m typing this on my phone. But it would be something like
$('.clickableImg').click(function() {
var altText = $(this).attr('alt'); // $(this) is the image element you clicked
$('#dialog').empty() // empty out what's in the dialog box
.html(altText) // set the dialog box's html to the text in the alt
.dialog('open'); // open the dialog box
});
This also removed the need for the <a href=“#”></a>, since I’m setting the image to a clickable element. You may also want to add this to your CSS if you do it this way:
Thanks for your help! This is really cool!
If my $row[‘description’] itself is an image file and not pure text, how do I do it?
Can I do it via the <div> method? How does the code looks like?
$('.clickableImg').click(function() {
var imgUrl = $(this).data('fullimage'); // $(this) is the image element you clicked
$('#dialog').empty() // empty out what's in the dialog box
.append($('<img>').attr('src', imgUrl))
.dialog('open'); // open the dialog box
});
You can name the data element anything you like, I just assume you’re doing it for a thumbnail type image so I used “fullimage”.
Doing it this way, will allow the user to load the larger image as they are requested… rather than everything all at once when the page is loaded initially. It will be much faster.
Please take the time to look through the below links:
The data-* attribute is technically HTML5, but it’s supported in older browsers and I’ve used it in apps built for IE8 without issue.
Reference: Can I use dataset & data-* attributes
