Scrolling is not working inside jQuery popup

Question

5.00/5 (1 vote)

See more:

Description

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.

<html>
<head>
    <title>Popup Scroll</title>
</head>
<body>
    <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');
        }
    </script>
    <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">
                <tr>
                    <th align="left">
                        Popup Title
                    </th>
                    <th align="right">
                        <input type="button" id="btnpopupclose" value="X"  önclick="$('#Popwindow').dialogClose();" />
                    </th>
                </tr>
                <tr>
                    <td colspan="2">
                        <table width="100%" border="0" cellpadding="0" cellspacing="0">
                            <tr>
                                <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.
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
        </div>
    </form>
    <input type="button" id="btnpopupopen" value="Open Popup"  onclick="openpop();" />
</body>
</html>

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

Date	Details
01-Mar-2011	BTW 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-2011	I have changed this issue type as cosmetics & low priority in the project bug list. :rolleyes: So please try again guys.
28-Apr-2011	BTW 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-2011	Well, 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.

Posted 28-Feb-11 1:40am

thatraja

Updated 3-Jun-11 5:43am

v8

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

sudheshna123 · Answer 1 · 2011-02-28T19:50:00

Solution 1

May be something wrong with the plugin "dialog" used in jquery but i'm not sure about it

Posted 28-Feb-11 19:50pm

sudheshna123

Comments

thatraja 2-Mar-11 19:18pm

/*May be something wrong with the plugin "dialog" used in jquery*/
Nope. Please try again.

nit_singh · Answer 2 · 2011-04-27T23:35:00

Solution 2

can you add two more options into dialogOpts as "modal: true", "bgiframe: false"

Posted 27-Apr-11 23:35pm

nit_singh

Comments

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.

Jain Nishant · Answer 3 · 2013-12-08T23:41:00

Forget all of the above... try this :-

XML

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript" src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></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>");
            diag.dialog({
            title: 'My Pop-up',
            dialogClass: 'dialog_fixed,ui-widget-header',
                modal: true,
                width: 850,
                minHeight: 400,
                draggable:true
            });
        });
    });
</script>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <input type="button" value="Click to open Pop-up!" id="btnPopup" />
    </div>
    </form>
</body>
</html>

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

Hope, this will helps you...