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

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • 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

    • This topic was modified 7 years, 9 months ago by  Peter Stoev. Reason: Moved to Window Forum
    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/

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.