Hello Community,
I am working in SP 2013 and I have created a JQuery Modal Dialogue Box that launches from a CEWP. I want to add styling to that Modal Dialogue Box but I'm not quite sure how to do it. Here is the basic code - HTML:
<b>Click Here!</b> <input name="name" title="Popup" type="checkbox"/>
JQuery:
<script src="http://code.jquery.com/jquery-3.1.0.min.js" type="text/javascript"></script><script type="text/javascript">
$(function () {
$("input[title='Popup']").change(function() {
if($(this).is(':checked')){
popup_openModalDialog();
}
});
});
//Modal Dialogue for Delete Tasks
function popup_openModalDialog() {
//Create HTML Content for Dialogue Box
var html = document.createElement('div');
html.innerHTML = '<div id="myModal" class="modal">\<div class="modal-content">\<div class="modal-header">\ <h2>Modal Header</h2></div>\ <h3>Navigation Menu Goes Here</h3></p>\<h3>Click "OK" to Continue and "Cancel" to Reset the Checkbox field.</h3></p>\<a href="#" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel); return false;">OK |</a>\<a href="#" onclick="SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK); return false;"> Cancel</a></div></div>';
//OK(Cancel)=1, Cancel(Continue)=0
//Open Dialogue with Set Options
OpenPopUpPageWithDialogOptions({
title: "Mighty Fine Modal Dialogue Box",
html:html,
width:600,
height:600,
dialogReturnValueCallback: function(dialogResult){
SP.UI.ModalDialog.RefreshPage(dialogResult);
}
});
}</script>CSS:
<style type="text/css">
/* Modal Header */
.modal-header {
padding: 2px 16px; background-color: #5cb85c; color: white;
}</style>Has anyone else done this? If so please provide guidance and code examples.
Thanks!
Tom
Tom Molskow - Senior SharePoint Architect - Microsoft Community Contributor 2011 and 2012 Award - Linked-In - SharePoint Gypsy