CODEWITHSUNDEEP
jqueryjquery-ui
Aslan
Aslan

Reputation: 148

Floating modal window with jQuery

I would like to make a simple modal window like in this example http://jqueryui.com/dialog/ to float when the body of the page scrolls down and up on a specific location. It can be top right, bottom right or middle right.

I have used his code:

 $(function () {

     $("#dialog").dialog({
         maxHeight: 200,
         width: 400,
         autoOpen: true,
         show: {
             effect: "blind",
             duration: 1000
         },
         hide: {
             effect: "explode",
             duration: 1000
         }
     });
     $("#opener").click(function () {
         $("#dialog").dialog("open");
     });

     $(window).scroll(function () {

         //after window scroll fire it will add define pixel added to that element.
         set = $(document).scrollTop() + "px";

         //this is the jQuery animate function to fixed the div position after scrolling.
         $('#dialog').animate({ top: set }, { duration: 1000, queue: false });


     });
 });

how ever this will only float the text inside of the dialog not the whole window.

Any help would highly be appreciated :)

Upvotes: 0

Views: 1983

Answers (1)

madushak
madushak

Reputation: 250

Try changing the "#dialog" selector to ".ui-dialog",

$(window).scroll(function () {

     //after window scroll fire it will add define pixel added to that element.
     set = $(document).scrollTop() + "px";

     //this is the jQuery animate function to fixed the div position after scrolling.
     $('.ui-dialog').animate({ top: set }, { duration: 1000, queue: false });
 });

Because $('#dialog') converts into a new DOM element once the dialog box is created by jQuery UI, and the new DOM element can be identified via $('.ui-dialog')

Upvotes: 1

Related Questions