0

I have a custom SharePoint 2013 form that I'm working on that I need to create a popup warning for on the page load. This pop up needs to be able to link to other sections in the site. I've checked around, I don't think an alert will give me what I need because I need to add links. I have not been able to find a solution online that does what I need it to do.

  • What I'd try is to open the Modal Dialog from SP with JavaScript. Documentation here: msdn.microsoft.com/en-us/library/office/… – Sareska Dec 15 '17 at 17:37
  • That does look like it would work, but for some reason when I throw it in my code, it just breaks it. I just paste it inbetween the scripts tag and updated the url and its kaput. – Natalie Dec 15 '17 at 19:18
0

For this issue, I believe you could make use of two different methods (depending on your specific requirement):

  • Make use of the SP.UI.ModalDialog.showModalDialog option. You can link to an existing URL or simply add your required HTML tags (e.g. a-tags for URL's) within the "html" parameter of this method.
  • Make use of simple HTML/CSS/JS to display the modal on page load (example JSFiddle):

HTML

<p>This is the content of the page</p>
<div id="modal" class="modal">
  <div class="warning">
    <div>
      <span class="exit">&times;</span>
      <a href="https://www.google.com">Google</a>
    </div>
    <a href="https://www.google.com/random">Some SharePoint URL</a>
  </div>
</div>

CSS

.modal {
  display: block;
  position: fixed;
  left: 0;
  top: 0;
  padding-top: 20px;
  z-index: 1;
  width: 100%;
  height: 100%;
  background-color: grey;
  background-color: rgba(0, 0, 0, 0.5);
}

.warning {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.exit {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

JavaScript

var modal = document.getElementById('modal');
var span = document.getElementsByClassName("exit")[0];

span.onclick = function() {
  modal.style.display = "none";
}

Hope this works for you! Please let me know what you ended up using.

Kind Regards,

Robin

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.