Available in the OSS Version
Dialog Window - External Page Loading
This sample demonstrates how to load external content from a URL.
This sample uses CTP (Community Technical Preview) features. The API and behavior may change when these features are released with full support.
This sample is designed for a larger screen size.
On mobile, try rotating your screen, view full size, or email to another device.
Code View
Copy to Clipboard
<!DOCTYPE html> <html> <head> <title></title> <!-- Ignite UI for jQuery Required Combined CSS Files --> <link href="http://cdn-na.infragistics.com/igniteui/2024.2/latest/css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="http://cdn-na.infragistics.com/igniteui/2024.2/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> <!-- Ignite UI for jQuery Required Combined JavaScript Files --> <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.core.js"></script> <script src="http://cdn-na.infragistics.com/igniteui/2024.2/latest/js/infragistics.lob.js"></script> </head> <body> <button id="openDialog"> </button> <!--igDialog target element--> <div id="dialog"> <iframe src="https://www.infragistics.com" frameborder="0" width="100%" height="100%"></iframe> </div> <script> $(function () { var width = $(window).width > 480 ? 440 : 280, height = $(window).width > 480 ? 440 : 440; // Initialize the open button with igButton $("#openDialog").igButton({ labelText: "Open Dialog" }); // Initialize the igDialog $("#dialog").igDialog({ height: height, width: width, headerText: "https://www.infragistics.com", showMinimizeButton: true, showMaximizeButton: true, showPinButton: true, zIndex: 100005 }); $("#openDialog").on({ click: function (e) { // Open the igDialog $("#dialog").igDialog("open"); } }); }); </script> </body> </html>