Modal PoP Up in SharePoint using BootStrap
[vc_row][vc_column][/vc_column][/vc_row][vc_row parallax=”content-moving” parallax_image=”99103″ css_animation=”fadeIn” css=”.vc_custom_1563115556985{margin-top: 0px !important;padding-top: 50px !important;padding-bottom: 50px !important;}”][vc_column][vc_column_text css_animation=”fadeIn”]
Client
Holchem laboratories
[/vc_column_text][vc_column_text css_animation=”fadeIn”]
Duration
2 Days
[/vc_column_text][vc_column_text css_animation=”fadeIn”]
Used technologies
SharePoint, SP.JS, BootStrap, Html5, Css3, Jquery.
[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]In this article, I will explain how you can load a modal pop up window in SharePoint (classic mode), using BootStrap.
I am becoming a big fun of BootStrap, especially when we can leverage SharePoint to a higher level.
Please remember, this won’t work in the SPFx, I will share another post later explaining how to load a modal pop up using SPFx.
If you want to check what you can do with bootstrap, please visit –> https://getbootstrap.com/docs/4.3/components/modal/
The way I implemented this, is by having a content editor web part in a Wiki Page or Web Part pages, and I insert the code which will contain:
– The required CSS and JS files
– The button which has the event that triggers the modal pop up
– The modal pop up itself.
The required CSSs and JSs
I strongly advise that you load the bootstrap CSS and JS files from a CDN rather than having them in a document or asset library in SharePoint.
BootStrap requires JQuery too, which needs to be loaded before any other JS files (You migh need to debug your page and make sure that JQuery is not already loaded as this might cause an issue).
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"/> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
The button which will trigger the Modal PopUp
A simple button which contains the event that fires the Modal Pop up, the event can also be attached to an image or any other object in the DOM.
<a data-toggle="modal" data-target="#MODALWINDOW" onclick="return false;"> THE TRIGGER BUTTON</a>
The Modal PopUp
Here is the simple modal pop up, you can use different sizes for the pop up and have different options (for more details, please check the Bootstrap Modal page).
<div class="modal fade" id="MODALWINDOW" tabindex="-1" role="dialog" aria-hidden="true"> <div class="modal-dialog modal-lg " role="document"> <div class="modal-content"> <div class="modal-header"> <h3 class="modal-title" id="exampleModalLabel">**THE MODAL TITLE ***</h3> </div> <div class="modal-body"> <div class="row"> ***** YOUR CONTENT GOES HERE ***** </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button> </div> </div> </div> </div>
In practice, I used this approach in one of my intranet projects, where I had an icon for reporting an issue opens the pop up to select the type of incident (IT, Security or Safety incident).
[/vc_column_text][/vc_column][/vc_row]