ansaurus

Question

Answer 1

A:

$(document).load(funtion(){
       $( ".selector" ).dialog({ modal: true });
});

stackunderflow 2010-10-20 17:10:21

Answer 2

A:

Here is a method I like to do, I've re-factored it a bit so it'll open on load by triggering a click. You'll also have to download the fancybox plugin (which is awesome). Then you just add the iframe class to whatever link and it'll load the link the modal window. You can change it to an id if you like, it was originally used on multiple links etc.

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></script>
    <script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
    <script type="text/javascript" src="/scripts/fancybox/jquery.easing-1.3.pack.js"></script>

<script type="text/javascript">                    
            $(document).ready(function() {

             $(".iframe").fancybox({ 
                'transitionIn'  :   'elastic',
                'transitionOut' :   'elastic',
                'speedIn'   :   600, 
                'speedOut'  :   200, 
                'overlayShow'   :   true,
                'autoScale' :   true,
                'width'     :   '90%',
                'height'    :   '90%',
                'overlayOpacity':   0.8,
                'centerOnScroll':   true,
                'showCloseButton':  true,

                });
                $(".iframe").trigger('click');
            });

</script>

The example:

<!DOCTYPE HTML>
<head>
<title>title</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"&gt;&lt;/script&gt;
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js" ></script>
    <script type="text/javascript" src="/scripts/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
    <script type="text/javascript" src="/scripts/fancybox/jquery.easing-1.3.pack.js"></script>

<script type="text/javascript">        

            $(document).ready(function() {
                $(".iframe").fancybox({ 
                'transitionIn'  :   'elastic',
                'transitionOut' :   'elastic',
                'speedIn'   :   600, 
                'speedOut'  :   200, 
                'overlayShow'   :   true,
                'autoScale' :   true,
                'width'     :   '90%',
                'height'    :   '90%',
                'overlayOpacity':   0.8,
                'centerOnScroll':   true,
                'showCloseButton':  true

                });


                $(".iframe").trigger('click');
            });

</script>
<style type="text/css">
    .iframe {display:none;}
</style>
</head>
<html>
     <body>
         <a href="www.google.com" class="iframe">Text</a>
     </body>
</html>

That's an example. From here the only thing that you'll really have to make sure of is uploading the fancybox javascript file to the right folder. Do you have a link for the page so that we can see the page and error check it for you?

Micharch54 2010-10-20 17:23:49

This is really helpful but unfortunately I'm gonna need the steps a little more spelled out for me. Where do I put this code? Where do I add the URL I want to have opened in the Modal Dialog? What are the steps? Again, I'm an über-novice. Think "beyond beginner."

Dr.Fishtable 2010-10-20 18:12:15

Okay, The <script> tags should always go in the head of the document. So, <head><script blah blah></script> </head> I'll edit this so that you can pretty much copy and paste it into your head. But I'll explain it as best I can. We're using jquery to initialize the fancybox plugin. It's just an extension of jquery which is just a javascript library. The options you see ("width") allow you to change the look and feel of the window.

Micharch54 2010-10-20 18:16:56

From there we simply have the $(document).ready function making sure that as soon as the DOM is ready it'll trigger a click on the link with the class="iframe" tag. So for your link it'll be <a href="http://www.google.com" class="iframe">Text</a> That's all the link needs. Now the (".iframe") is what tells it to look for a class in jquery ".name" means class and ("#name") equals id. You'll want to note this since an id will only be recognized once on a page. For more information on this go to http://www.w3schools.org. Whatever link you put in the <a> tag will be what is loaded into the

Micharch54 2010-10-20 18:21:02

Frame. I have it set to class, which is fine as long as you don't put multiple links with the same class, I'm not sure what will happen but I suspect it'll flash through several pages really quick... but who knows without testing. One thing to note, you'll need to get the fancybox plugin and make sure the link points to it. If you create a scripts folder on your server and just put the folder in there it'll work. You can find it here http://fancybox.net/ . It's one of the better modal boxes I've found in terms of functionality. As long as the link to the fancybox.js file is correct

Micharch54 2010-10-20 18:24:01

this'll work since it's linking to jquery through google (yay for caching). Anyways. I hope that helps.

Micharch54 2010-10-20 18:24:58

I've fixed it so that you can copy and paste it in the head of the file and then just put the fancybox in the right folder i.e. a scripts folder in your web root.

Micharch54 2010-10-20 18:27:42

This is loading a frame on the left-hand side of the page, but what I am wanting is a pop-up dialog.

Dr.Fishtable 2010-10-20 19:22:52

Hey Micharch, the coding you gave me isn't bringing up any kind of modal dialog. Please help!

Dr.Fishtable 2010-10-20 19:51:38

Did you get the fancybox plugin from the website? You'll need that. You should also check that your dtd is correct, I recommend just going with <!DOCTYPE HTML> it's html5 but none HTML5 browsers still handle it well without going into quirks mode. An Example)

Micharch54 2010-10-20 21:06:49

Stupid button. lol. <!DOCTYPE HTML>

Micharch54 2010-10-20 21:07:08

I just edited the main window, this was too hard to continue in comments. But if you can include a link I'll look at your source code

Micharch54 2010-10-20 21:13:26

Howdy, so here is a link to the page in question. It appears not to be working. Please excuse the messy code contained within. http://www.acrosports.org/index-test.asp

Dr.Fishtable 2010-10-20 22:29:52

Okay I believe it was with my script. You'll notice I moved the function inside the document.ready function as well as added a tad bit of css to hide the link on your page. You appear to have everything working well on your page, all of the files were loading correctly etc. Try making that change and I'll look at it more in a bit and see what could be wrong.

Micharch54 2010-10-20 22:55:26

Have a look again. No dialog is coming up, just looks like the regular page. Am I missing something?

Dr.Fishtable 2010-10-20 23:09:53

Found the error, .ready(function) { should be .ready(function() {

Micharch54 2010-10-20 23:17:12

Oh and one more thing lol something important I forgot to include, the stylesheet

Micharch54 2010-10-20 23:18:01

Put this in the head as well, above the scripts <link rel="stylesheet" href="/scripts/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />

Micharch54 2010-10-20 23:18:59

Yay! It worked! I'd just bump the width option from 90% to 70% for a better look though. It's up to you.

Micharch54 2010-10-21 00:03:21

Awesome! Now what if I want to do an image gallery that rotates automatically?

Dr.Fishtable 2010-10-21 00:21:05

Same general principle, but you'll do this:/* HTML */<a class="grouped_elements" rel="group1" href="image_big_1.jpg"><img src="image_small_1.jpg" alt=""/></a><a class="grouped_elements" rel="group1" href="image_big_2.jpg"><img src="image_small_2.jpg" alt=""/></a> <a class="grouped_elements" rel="group2" href="image_big_3.jpg"><img src="image_small_3.jpg" alt=""/></a> <a class="grouped_elements" rel="group2" href="image_big_4.jpg"><img src="image_small_4.jpg" alt=""/></a> /* This will create two galleries */ $("a.grouped_elements").fancybox();

Micharch54 2010-10-21 05:26:28

So replace the $(".iframe").fancybox({ 'transitionIn' : 'elastic', 'transitionOut' : 'elastic', 'speedIn' : 600, 'speedOut' : 200, 'overlayShow' : true, 'autoScale' : true, 'width' : '90%', 'height' : '90%', 'overlayOpacity': 0.8, 'centerOnScroll': true, 'showCloseButton': true });

Micharch54 2010-10-21 05:27:17

With $("a.grouped_elements").fancybox(); and add the images with the class and group them with the rel="groupname". things in the same group will have the same rel tag property, and anything you want to be included in the gallery will have the class="grouped_elements" property

Micharch54 2010-10-21 05:29:10

Dude, that's frigging awesome. Oh, and Happy Monday. There is one last thing I need in relation to this issue: I want to have the images scroll automatically (i.e., switch from one to the next, perhaps after some specified time interval?) Where might I be able to do that?

Dr.Fishtable 2010-10-25 22:08:48

Add this:$(document).read(function(){function autoscroll(){ $.fancybox.next}setInterval( "autoscroll()", 10000 );}});This should automatically scroll to the next one ever 10 seconds (I've not tested this but I'd imagine it'll work alright). The other option is to add it as an option onComplete: function(){ setInterval( $.fancybox.next, 10000 );}One or both of those should work...

Micharch54 2010-10-26 20:20:08

Awesome! That works great. Is it possible to add a "Pause" button for End Users to temporarily pause the autoscroll interval?

Dr.Fishtable 2010-10-27 17:38:51

Yes it's technically possible but we'd have to change some css in the fancybox.css file and add an image and then we could do an onclick function. It's going to require a fairly significant change to the underlying jQuery and everything I'd imagine. I'll look at it but no promises on this one. Sorry.

Micharch54 2010-10-28 23:01:20

Answer 3

+1 A:

You can achive modal window with out jquery. use the following code

function modalWin() { if(window.showModalDialog){ window.showModalDialog("xpopupex.htm","name", "dialogWidth:255px;dialogHeight:250px"); } else { window.open('xpopupex.htm','name', 'height=255,width=250,toolbar=no,directories=no,status=no, menubar=no,scrollbars=no,resizable=no ,modal=yes'); } }

Sujith 2010-10-21 05:41:52

ansaurus

tags:

views:

answers:

Adding a Modal Dialog on page load

related questions