Add support for content loaded in an iframe on the modal.

README.md

@@ -13,12 +13,14 @@ Contains some nice [jQuery](http://jquery.com) plugins to make working with the
 * Localization
 * No dependencies to jQuery.UI
 * Control via [`html` markup](#let-the-markup-rule) possible
+* Load an external URL (using iframe) inside the modal
 
 ## Dependencies
 
 * [jQuery.form](http://jquery.malsup.com/form/) plugin >= 2.8 for ajax form submit 
 * [jQuery.controls](https://github.com/Nikku/jquery-controls) plugin  >= 0.9 for ajax link binding support
 * [Bootstrap styles](http://twitter.github.com/bootstrap) 2.x to look nice
+* [jQuery.query](http://archive.plugins.jquery.com/project/query-object) plugin for handling urls in jquery.dialog2.iframe
 
 ## Migrating from earlier versions
 * Migration from 1.x:

lib/jquery.dialog2.iframe.js

@@ -0,0 +1,109 @@
+/*
+* jQuery Dialog2 IFrame
+* 
+* Licensed under the MIT license 
+* http://www.opensource.org/licenses/mit-license.php 
+* 
+* @version: 1.0.2 (08/03/2013)
+* 
+* @requires jQuery >= 1.4 
+* 
+* @requires jQuery.dialog2 plugin >= 1.1
+* 
+* @requires jQuery.query plugin >= 2.1.7
+* 
+* @author Jorge Barnaby (jorge.barnaby {at} gmail.com)
+*/
+(function ($) {
+
+    /*
+    * Shows a web page (using iframe) in a jQuery dialog2 (Bootstrap style).
+    *
+    */
+    $.fn.dialog2IFrame = function (options) {
+        options = $.extend({}, $.fn.dialog2IFrame.defaults, options);
+        $(this).click(function (e) {
+            e.preventDefault();
+            var idDialogOuter = "dialog-iframe-outer";
+
+            var mainWin = window;
+            var btn = this;
+            var $btn = $(btn);
+            var $dialogOuter = $('#' + idDialogOuter).length ?
+                $('#' + idDialogOuter) :
+                $('<div id="' + idDialogOuter + '"></div>').hide().appendTo(document.body);
+            var $dialogFrame = $('iframe', $dialogOuter).length ?
+                $('iframe', dialogOuter) :
+                $('<iframe frameborder="0" />').appendTo($dialogOuter);
+            var url = btn.href;
+
+            if (options.appendParamUrl) {
+                // Appends &iframe=true to url
+                url = btn.protocol + "//" +
+                    // Add trailing '/'' if not exists
+                    (btn.host.charAt(btn.host.length - 1) != '/' ? btn.host + '/' : btn.host) +
+                    // Remove starting '/'' if exists
+                    (btn.pathname.charAt(0) == '/' ? btn.pathname.substr(1, btn.pathname.length - 1) : btn.pathname) +
+                    $.query.load(btn.href).set("iframe", "true").copy();
+            }
+
+            // Adds URL to iframe src
+            $dialogFrame.attr('src', url);
+
+            $dialogOuter.css('overflow', 'hidden').css('padding', '0').css('margin', '0');
+
+            $dialogOuter.dialog2(
+            {
+                title: $btn.attr('title'),
+                /*buttons: {
+                    Close: {
+                        click: function () {
+                            options.close();
+                            $(this).dialog2('close');
+                            // If caller has the CSS Class 'reload-on-close' or
+                            // reloadOnClose option is true,
+                            // the main page will be reloaded on close.
+                            if ($btn.hasClass('reload-on-close') || options.reloadOnClose) {
+                                mainWin.location.reload();
+                            }
+                        }
+                    }
+                },*/ // TODO: Temporary removal
+                autoOpen: true,
+                closeOnOverlayClick: options.closeOnOverlayClick,
+                closeOnEscape: options.closeOnEscape,
+                removeOnClose: true,
+                showCloseHandle: options.showCloseHandle,
+                initialLoadText: "Loading..."
+            });
+
+            var $dialog = $dialogOuter.parent();
+
+            $dialog.addClass(options.additionalClass);
+
+            // Removes footer if empty
+            $footer = $dialog.find('.modal-footer');
+            console.log($footer.text().length);
+            if ($footer.text().length == 0) {
+                $footer.remove();
+            }
+
+            // Sets the iframe width and height to the same as the modal (must be done at the end)
+            $dialogFrame.width($dialogOuter.width()).height($dialogOuter.height());
+        });
+    }
+
+    $.fn.dialog2IFrame.defaults = {
+        additionalClass: "",
+        // Appends &iframe=true to URL opened on IFrame
+        appendParamUrl: false,
+        // Reloads main page when modal is closed
+        reloadOnClose: false,
+        closeOnOverlayClick: false,
+        closeOnEscape: false,
+        showCloseHandle: false,
+        close: function () {
+            return true;
+        }
+    };
+})(jQuery);

samples/index.html

@@ -6,8 +6,10 @@
         <script type="text/javascript" src="js/jquery.1.6.2.min.js"></script>
         <script type="text/javascript" src="js/jquery.controls.js"></script>
         <script type="text/javascript" src="js/jquery.form.js"></script>
+        <script type="text/javascript" src="js/jquery.query.js"></script>
         <script type="text/javascript" src="../lib/jquery.dialog2.js"></script>
         <script type="text/javascript" src="../lib/jquery.dialog2.helpers.js"></script>
+        <script type="text/javascript" src="../lib/jquery.dialog2.iframe.js"></script>
         <script type="text/javascript" src="js/prettify.js"></script>
 
         <style type="text/css">
@@ -709,7 +711,7 @@ <h2>Hook into the behaviour of the dialog using events</h2>
 							<tr><td><code>dialog2.closed</code></td><td>the dialog is closed</td><tr>
 						</tbody>
 					</table>
-					
+
 					<script type="text/javascript">
 						$(function() {
 							var eventLog = [];
@@ -758,6 +760,33 @@ <h2>Hook into the behaviour of the dialog using events</h2>
 						});
 					</script>
 
+                    <h2>Open external websites within an iframe in your modal</h2>
+
+                    <div class="activity">
+                        <p>
+                            Open <a href="pages/iframe.html" id="dialog-iframe" title="IFrame Title">a dialog</a> with an iframe inside.<br/>
+                            <a class="show-source-link" href="#">(View source)</a>
+                        </p>
+                    </div>
+                    <div class="source">
+                        <h5>Source</h5>
+                            <pre class="prettyprint lang-html">
+&lt;a href=&quot;pages/iframe.html&quot; id=&quot;dialog-iframe&quot; title=&quot;IFrame Title&quot;&gt;open external url!&lt;/a&gt;
+&lt;script type=&quot;text/javascript&quot;&gt;
+    $(function() {
+        $(&quot;#dialog-iframe&quot;).dialog2IFrame({
+            height: 300,
+            appendParamUrl: false,
+            reloadOnClose: false
+        });
+    });
+&lt;/script&gt;</pre>
+                        </div>
+
+                    <script type-"text/javascript">
+                        $('#dialog-iframe').dialog2IFrame();
+                    </script>
+
                     <h2>Clarification needed?</h2>
                     <p>
                         Check out the <a href="https://github.com/Nikku/jquery-bootstrap-scripting/#readme">plugin documentation</a>.