To provide this feature on your Office 365 public site, you
can do the following:
Step one add a new
page
Look at the page properties and make sure to uncheck these
options:
- Show this page in the navigation bar
- Include Header, footer and Navigation
Step two add the
contact gadget and add the message that you want to convey to the user
At this point, we have a page that can be navigated, and it
displays none of the master page section. This is the page that we use for the
modal dialog. Design this page with the width and height that you want to
present to the user. This size is the reference that we need to build the modal
dialog. The entire page may have the site width, but you should try to make the
gadget fit a certain size. Also add any design that you need. Try adding a logo
or banner. Name this file contactform.aspx. Load the page on the browser. It should
look something like the image below. (Notice no header, footer and navigation
menu)
Step three add the
JavaScript
For this
step, we are using JQuery and JQuery-Blockui. The Blockui widget allows us to
create the modal dialog on the page.
Include the references to these JavaScript in the page where you need
the dialog. Ideally, you will do this on
the master page, so that it is included in all your pages. For this however,
you need to be using a custom master page. Office 365 has some issues with custom
master pages. We will also add a reference to the JavaScript that we will
create on the next step.
Step four create the
widget
We now need to create a JavaScript file that contains our
widget implementation. The widget will basically do the following:
On page load, it adds the HTML that contains the modal
dialog. This is done by appending the
HTML to the body of the page. The HTML is just a div element with some CSS
style and an iframe element. The iframe uses as source the page that was
created on step one. Make sure to style
this div to fit the size that you use. This is nothing new. It is just the
basic modal dialog pattern for web pages. This is what the HTML looks like:
(this is added to the widget script as a property)
<div id="contactForm" style="width:570px; height:715px;display:none;background:#436c99;border:2px
#d5d3d3 solid;"><div
style="float:left;font-size:16pt;margin:5px;color:#ffffff;">Contact
Us</div><div id="closebtn"
style="float:right;top:5px;"><a href="#"
onclick="CloseContact();"><img
src="../images/close.png" alt="close"
border="0"/></a></div><iframe src="contactform.aspx" width="100%" height="90%"
frameborder="0"
scrolling="no"></iframe></div>
Use the following snippet to implement the Widget:
//this
function is used by the contact form page to close the modal dialog
function
CloseContact(){
contactWidget.CloseDialog();
}
var
contactWidget = {
Init:function(){
$('body').append(this.html);
},
OpenDialog:function(){
$.blockUI({ message: $('#contactForm'),centerY:true,css:
{
top: ($(window).height() - 715) /2 + 'px',
left: ($(window).width() - 570)
/2 + 'px', border:'0px',
'-webkit-border-radius':
'10px',
'-moz-border-radius':
'10px',width:'570px'
}});
},
CloseDialog:function(){
$.unblockUI();
},
html:'<div id="contactForm"
style="width:570px;
height:715px;display:none;background:#436c99;border:2px #d5d3d3
solid;"><div style="float:left;font-size:16pt;margin:5px;color:#ffffff;">Contact
Us</div><div id="closebtn"
style="float:right;top:5px;"><a href="#"
onclick="CloseContact();"><img src="../images/close.png"
alt="close" border="0"/></a></div><iframe
src="contactform.aspx" width="100%" height="90%"
frameborder="0"
scrolling="no"></iframe></div>'
}
$(document).ready(function(){contactWidget.Init();});
The script is basic. On document ready, it calls the Init
function. This adds the html to the DOM. Notice that the HTML is contained by
the widget. This allows us to reuse it in several pages by just including the
reference to the JavaScript. Save the file and name it contactWidget.js. You
can now include in the page the reference to this JavaScript file.
Step five wire the
widget
With the widget loaded on the page, the next step is to just
wire an element’s click event to the function contactWidget.OpenDialog. This
opens the modal dialog and displays the contact form.
Step six handle the
back button on the thank you page.
If you load the contact page on the modal dialog, you will
notice that after submitting the information, the contact page shows a back button
and a message. If you click it, it only takes you back to the contact form. The
user still needs to click on the close image to close the dialog. You may be ok
with this functionality, but we could also close the dialog after the back
button is clicked. You can do this by
overriding the click event on the contactform page using JQuery. The event
handler can call CloseContact function in the parent page with the following
script:
window.parent.CloseContact();
Happy coding
