Forums Ignite UI for jQuery
Your Privacy Matters: We use our own and third-party cookies to improve your experience on our website. By continuing to use the website we understand that you accept their use. Cookie Policy
Close
Jois Lobo
65
Igniteui modal pop up window
posted

I have a form and on click of a button I am trying to open a modal with few fields and two buttons. On click on buttons certain action needs to be triggered.DO you have any control that helps in such a scenario?

  • 280
    Offline posted

    Hello,

    Thank you for contacting us!

    The best control for this scenario is the dialog window.

    You can apply it as many buttons/ fields/inputs/.. as you want and add logic to them.

    The igDialog has some really convenient build-in functionality like showMinimizeButton, showMaximizeButton, showPinButton, draggable, which facilitate the developing experience and also the user experience, respectfully when creating and using this control.

    Here is a sample for you reference:

    <!DOCTYPE html>
<html>
<head>
    <link href="http://cdn-na.infragistics.com/igniteui/2019.1/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" />
    <link href="http://cdn-na.infragistics.com/igniteui/2019.1/latest/css/structure/infragistics.css" rel="stylesheet" />

    <script src="http://ajax.aspnetcdn.com/ajax/modernizr/modernizr-2.8.3.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>

    <script src="http://cdn-na.infragistics.com/igniteui/2019.1/latest/js/infragistics.core.js"></script>
    <script src="http://cdn-na.infragistics.com/igniteui/2019.1/latest/js/infragistics.lob.js"></script>
</head>
<body>
    <button id="openDialog">
	</button>
	<div id="dialog">
		<p>
         <img style="width: 150px" src="https://www.igniteui.com/images/samples/dialog-window/content.jpg" />
      </p>
        <input id="actionInput" style="margin: 5px"/>
        <button id="actionButton" style="margin: 5px">Action</button>
	</div>

    <script>

        $(function () {

            $("#openDialog").igButton({ labelText: "Open Dialog" });

            $("#dialog").igDialog({
                state: "closed",
                modal: true,
                draggable: true,
                resizable: false,
                showCloseButton: true,
                showMinimizeButton: true,
                showMaximizeButton: true,
                showPinButton: true,
                height: "350px",
                width: "290px",
				zIndex: 100010
            });

            $("#openDialog").on({
                click: function (e) {
                    $("#dialog").igDialog("open");
                }
            });

            $("#actionButton").igButton({disabled: false}).on({
                click: function(e){
                    window.alert($("#actionInput").val());
                }
            });
      });

    </script>

</body>
</html>

    Please, let me know if you have any questions!

    Best regards,
    Hristo Popov