Click here to Skip to main content
15,122,728 members
Please Sign up or sign in to vote.
5.00/5 (1 vote)
See more:


In webpage, Scrolling is not working inside jQuery popup & it's just dragging the entire popup window on page. Kindly help me to resolve this. Thank you guys.
    <title>Popup Scroll</title>
    <script type="text/javascript" src="js/jqueryPopUp/jquery-latest.js"></script>
    <script type="text/javascript" src="js/jqueryPopUp/jquery.dimensions.js"></script>
    <script type="text/javascript" src="js/jqueryPopUp/ui.dialog1.js"></script>
    <script type="text/javascript" src="js/jqueryPopUp/ui.resizable.js"></script>
    <script type="text/javascript" src="js/jqueryPopUp/ui.mouse.js"></script>
    <script type="text/javascript" src="js/jqueryPopUp/ui.draggable.js"></script>
    <script type="text/javascript">  
        function openpop()
            document.getElementById('Popwindow').style.display = "block"; 
            $('#Popwindow').dialog({ position: 'center' });
            $('#Popwindow').dialog('option', 'position', 'center');
    <form id="Form1"  runat="server">
        <div id="Popwindow" class="div_popup" style="display: none; removed: relative; border: solid 1px #000000;">
            <table width="100%" border="0" cellpadding="0" cellspacing="0" id="Table2" class="div_popup_table">
                    <th align="left">
                        Popup Title
                    <th align="right">
                        <input type="button" id="btnpopupclose" value="X"  önclick="$('#Popwindow').dialogClose();" />
                    <td colspan="2">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
                                <td class="popuptable">
                                    <div id="div-datagrid_dg" style="height: 100px; overflow: scroll;">
                                        I am having a problem with a modal popup that has a vertical scroll bar. If I try to click and drag the scroll box or "thumb" along the track the whole modal popup is dragged across the screen. The scroll buttons will advance the scroll, I just can't grab the thumb without dragging the whole screen.
    <input type="button" id="btnpopupopen" value="Open Popup"  onclick="openpop();" />

Screen Shot

Clickety[^](I can't make a gif file so I did something in jpg file hope it will help you to look forward to this)

Resources to Download

jquery-latest.js - jQuery Latest[^]
jquery.dimensions.js - jQuery Dimensions[^]
ui.dialog1.js - jQuery UI/API/1.8/Dialog[^]
ui.resizable.js - jQuery UI/API/1.8/Resizable[^]
ui.mouse.js - jQuery ui/Mouse.js[^]
ui.draggable.js - jQuery UI/API/1.8/Draggable[^]

Edit History

01-Mar-2011BTW you can run this HTML page if you have those jQuery script files. You can open the Popup & you can Drag that anywhere in the page but the issue is I can't scroll the scrollbar(It's dragging the popup screen in the page.)
Please see the attached screen-shot for the clarification.
03-Mar-2011I have changed this issue type as cosmetics & low priority in the project bug list. :rolleyes: So please try again guys.
28-Apr-2011BTW it's working in IE but not in Firefox....Actually I don't like this(my idea is to replace this with AJAX toolkit which is easy for me....BTW It's existing project for me) but here the PM don't accept my suggestion :mad:
Added Resource links to download
03-June-2011Well, I relieved from my current company so no need.... :)
Now I remember below joke

God decided it was time to end the world, so he called together those whom he considered the three most influential people in the world - Bill Clinton, Fidel Castro and Bill Gates. "The world will end," God told them. "You must go tell the people." President Clinton made a live statement on CNN. "I have good news and I have bad news," he said. "The good news is that we have been right, there is a God. The bad news is that he is ending the world." Castro sent out a worldwide message to all Communists. "I have bad new and worse news," he said. "The bad news is that we have been wrong all along, there is a God. The worse news is that he is ending the world." Bill Gates go on his computer and sent out a worldwide e-mail on the Internet. "I have good news and I have better news," he wrote. "The good news is that God thinks I am one of the three most influential people in the world. The better news is that we don't have to upgrade Windows '95!"

BTW I'll try solve this issue myself when ever possible. Thanks to all.
Updated 3-Jun-11 6:43am

May be something wrong with the plugin "dialog" used in jquery but i'm not sure about it
thatraja 2-Mar-11 19:18pm
/*May be something wrong with the plugin "dialog" used in jquery*/
Nope. Please try again.
can you add two more options into dialogOpts as "modal: true", "bgiframe: false"
thatraja 28-Apr-11 6:22am
I tried dude but still not working :( Please try again for me. Normally IE gave me trouble but this time firefox.
Forget all of the above... try this :-

<html xmlns="">
<head runat="server">
    <link rel="stylesheet" href="">
    <script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" language="javascript">
    $(function() {
        $('#btnPopup').click(function() {
            var diag = $("<div>DialogOpen content in an interactive overlay.Examples Default functionality AnimationBasic modal Dialogs may be animated by specifying an effect for the show and/or hide properties. You must include the individual effects file for any effects you would like to use.</div>");
            title: 'My Pop-up',
            dialogClass: 'dialog_fixed,ui-widget-header',
                modal: true,
                width: 850,
                minHeight: 400,
    <form id="form1" runat="server">
    <input type="button" value="Click to open Pop-up!" id="btnPopup" />

Now, when you run this code on browser, try resizing the pop-up window. You can see the scrolling......

Hope, this will helps you...

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900