jQuery UI Widgets › Forums › Dialogs and Notifications › Window › Open another Web Page as jqxWindow

Tagged: , ,

This topic contains 1 reply, has 2 voices, and was last updated by  Nadezhda 10 years, 4 months ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Open another Web Page as jqxWindow Posts
  • September 8, 2014 at 8:58 am Open another Web Page as jqxWindow #59224

    13larc
    Participant

    Hi all,

    I have a masterpage contraing Button and One more WebFormPage but it is not Nested with MasterPge

    now on Click on my MasterPage Button ,I want to open this WebFormPage as Modal jqxWindow

    i want to achieve that can someone help me out

    September 8, 2014 at 10:30 am Open another Web Page as jqxWindow #59230

    Nadezhda
    Participant

    Hello 13larc,

    You can use tag iframe to show your WebFormPage. Here is an example:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta name="keywords" content="jQuery Window, Window Widget, Window" />
    <meta name="description" content="This demo demonstrates how to trigger some of the jqxWindow events like open, closed and moved." />
    <title></title>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxpanel.js"></script>
    <script type="text/javascript">
        function capitaliseFirstLetter(string) {
            return string.charAt(0).toUpperCase() + string.slice(1);
        }
        function displayEvent(event) {
            var eventData = 'Event: ' + capitaliseFirstLetter(event.type);
            if (event.type === 'moved') {
                eventData += ', X: ' + event.args.x + ', Y: ' + event.args.y;
            }
            if (event.type === 'close') {
                eventData += ', Dialog result: ';
                if (event.args.dialogResult.OK) {
                    eventData += 'OK';
                } else if (event.args.dialogResult.Cancel) {
                    eventData += 'Cancel';
                } else {
                    eventData += 'None';
                }
            }
            $('#events').jqxPanel('prepend', '<div style="margin-top: 5px;">' + eventData + '</div>');
        }        
        function createElements() {
            $('#eventWindow').jqxWindow({
                maxHeight: 150, maxWidth: 280, minHeight: 30, minWidth: 250, height: 145, width: 270,
                resizable: false, isModal: true, modalOpacity: 0.3               
            });
            $('#events').jqxPanel({ height: '250px', width: '450px' });
            $('#showWindowButton').jqxButton({ width: '100px' });
        }
        $(document).ready(function () {
            //addEventListeners();
            createElements();
            $("#jqxWidget").css('visibility', 'visible');
        });
    </script>
</head>
<body class='default'>
    <div style="visibility: hidden;" id="jqxWidget">
        <input type="button" value="Show" id="showWindowButton" />
        <div style="width: 100%; height: 650px; border: 0px solid #ccc; margin-top: 10px;" id="mainDemoContainer">            
            <div id="events" style="width: 300px; height: 200px; border-width: 0px;">
            </div>
            <div id="eventWindow">
                <div>Modal Window</div>
                <div>
                      <iframe src="myPage.html"></iframe>                           
                </div>
            </div>
        </div>
    </div>
</body>
</html>

    I hope it would be helpful.

    Best Regards,
    Nadezhda

    jQWidgets team
    http://www.jqwidgets.com/

  • Author
    Posts
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.