jQuery UI Widgets › Forums › Dialogs and Notifications › Window › popup box as modal window

Tagged: , , , , , ,

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    popup box as modal window Posts
  • August 22, 2012 at 6:02 pm popup box as modal window #7026

    Nick
    Member

    Hi,

    I have a issue on how to create a popup window as a modal window on click of a button , and show options like yes or no and based on the input proceed further to save data.

    Please help me on deriving the solution for the above problem.

    Regards
    Nick

    August 23, 2012 at 6:07 am popup box as modal window #7035

    Dimitar
    Participant

    Hello Nick,

    Here is an example:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>jQuery Window CSS Styling Sample</title>
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
        <link rel="stylesheet" href="../../jqwidgets/styles/jqx.summer.css" type="text/css" />
        <script type="text/javascript" src="../scripts/jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
        <script type="text/javascript" src="../../jqwidgets/jqxwindow.js"></script>
    </head>
    <body>
        <div id='content'>
            <script type="text/javascript">
                $(document).ready(function () {
                    $("#jqxwindow").jqxWindow({ height: 150, width: 300, theme: 'summer', isModal: true, autoOpen: false });
                    $("#popup").click(function () {
                        $("#jqxwindow").jqxWindow('open');
                    });
                    $("#button_input").click(function () {
                        var T = $("#text_input").val();
                        $("#textbox").text(T);
                        $("#jqxwindow").jqxWindow('close');
                    });
                    $("#button_no").click(function () {
                        $("#jqxwindow").jqxWindow('close');
                    });
                });
            </script>
            <div id='jqxwindow'>
                <div>
                    Header</div>
                <div>
                    Please enter some text for the textbox:
                    <input type="text" id="text_input" />
                    <br />
                    Save the data?
                    <input type="button" value="Yes" id="button_input" />
                    <input type="button" value="No" id="button_no" />
                </div>
            </div>
            <button id="popup">
                Popup window!</button>
            <p>
                Textbox:</p>
            <div id="textbox" style="width: 300px; height: 300px; border: 2px solid green;">
            </div>
        </div>
    </body>
    </html>

    Best Regards,
    Dimitar

    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.