How to implement a jQuery 

Dialog with an iframe in the 

Sensation App 
 

Envato MarketPlace 
http://codecanyon.net/item/sensation-phonegapcordova-full-hybrid-app/8004904  
 
Twitter 
Mobile Hybrid Apps 
@AppsHybrid 
https://twitter.com/AppsHybrid 
 

Tutorial 
Sensation App​ gives you the bootstrap you need in order to build your next ​PhoneGap/Cordova 
application based on Onsen UI ​http://onsenui.io/​. In addition, it gives you many examples on how 
to access the native mobile functionality using the Cordova library. 
 
Regarding the ​jQuery Dialog ​implementation, please follow the steps below. This is also a 
specific example on how to add an ​iframe​ into the​ jQuery Dialog​. 
 
1. Add jQuery and jQuery UI 
Please edit the ​index.html​ file at the ​www​ folder (​www/index.html​) and place the following 
entries (you have always the option to download them locally). 
 
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
"></script>
<script
src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.m
in.js"></script>
<link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/smo
othness/jquery-ui.css" />
 
 
 
2. Add a new Menu entry for your Dialog page 
Please edit the ​data.js​ file at the ​www/js​ folder (​www/js/data.js​) and add the following menu 
entry in the MenuData Factory. 
 
{
title: 'jQuery Dialog',
icon: 'square-o',
page: 'dialog.html'
},

 
3. Create the dialog.html 
Please create the dialog.html file into the ​www ​folder (​www/dialog.html​) with the following 
content: 
 
<ons-page class="center" ng-controller="DialogController">

<ons-toolbar>
<div class="left">
<ons-toolbar-button onclick="ons.slidingMenu.toggleMenu()">
<ons-icon icon="bars">
</ons-toolbar-button>
</div>
<div class="center">jQuery Dialog</div>
</ons-toolbar>

<section style="padding: 10px;">

<ons-button modifier="large" ng-click="show()"

style="margin:20px 0 0 0;">Open Dialog</ons-button>

</section>

</ons-page>
 
3. Create the Dialog Controller 
Please edit the ​app.js​ file at the ​www/js​ folder (​www/js/app.js​) and create the Dialog Controller. 
Finally your new Controller will be the following one: 
 
// jQuery Dialog: Dialog Controller
app.controller('DialogController', function($scope) {

var iframe = $('<iframe frameborder="0" marginwidth="0"

marginheight="0" allowfullscreen></iframe>');

var w = $(window).width();
var h = $(window).height();

var dialog = $('<div

class="iframe-container"></div>').append(iframe).appendTo('body').dia
log({
autoOpen: false,
modal: true,
resizable: false,
width: w,
height: h
});

$scope.show = function () {
var title = 'Dialog Title';
iframe.attr({
src: 'http://onsenui.io/'
});
dialog.dialog('option', 'title', title).dialog('open');
}

});

 
4. Place the following style rules to your style.css 
Please edit your ​style.css​ at the w
​ ww/css​ folder (​www/css/style.css​) and add the following style 
rules at the bottom of this file: 
 
/* jQuery Dialog */
.iframe-container {
-webkit-overflow-scrolling:touch !important;
}
iframe {
width: 100%;
height:100%;
} 
 
 
6. Check the result 
 

 
 
  
 
Hope this was helpful for you :-) For any extra question, please use the contact form under my 
profile ​http://codecanyon.net/user/gtsopour?WT.ac=item_profile_text&WT.z_author=gtsopour 
 
Thanks 
George