1
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  height: 90%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.flip-card {
  background-color: transparent;
  width: 200px;
  height: 200px;
  perspective: 1000px;
  float: right;
  margin: 1em;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  float: right;
}

.flip-card-front {
  background-color: #98D0F0;
  color: black;
  width:200px;
  height:200px;
}

.flip-card-back {
  background-color: #98BBF0;
  color: white;
  transform: rotateY(180deg);
  width:200px;height:200px;
}
.card {
  background-color: transparent;
  width: 200px;
  height: 200px;
  perspective: 1000px;
  float: left;
  margin: 1em;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">
    <div class="card">
        <p>CERT Services</p>
    </div>
</button>

<!-- The Modal -->
<div id="myModal" class="modal">
  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
        <div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      
    </div>
    <div class="flip-card-back">

    </div>
  </div>
</div>
        
        
<!-- another one-->
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      <h3>Service Name</h3>
    </div>
    <div class="flip-card-back">
      <p>description</p>
    </div>
  </div>
</div>
<!-- end-->

<!-- another one-->
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      
    </div>
    <div class="flip-card-back">

    </div>
  </div>
</div>
<!-- end-->

<!-- another one-->
<div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front"> 
    </div>
    <div class="flip-card-back">
    </div>
  </div>
</div>
<!-- end-->
</div>

<!-- NEW MODAL-->



<div id="myModal-2" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
        <div class="flip-card">
  <div class="flip-card-inner">
    <div class="flip-card-front">
      
    </div>
    <div class="flip-card-back">

    </div>
  </div>
</div>
</div>
</div>


<script>
// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
  modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

</script>

</body>
</html>

I uploaded in my SP page, using Script Editor. the moment I click it, it shows the modal box and after a few seconds it refreshes the page.

How can i fix it, buy not making it refresh? It should stay opened until i click on "x" button.

0

I test you code above (without SharePoint), and it's a good UI Front-End in pure JavaScript.

When we develop on SharePoint, some custom UI not works similar like a trivial Web Development paradigm. To customize modals, it works with behavior that you mentioned at your question.

To make SharePoint modals, if you use a native masterpage, it's mandatory to use the SharePoint JavaScript Library to modals works. With this library, and you may control the modal visibility, but your HTML will be inner into this SharePoint Modal Box. For example, if we refactor your Front-End code above to load modal correctly, we need to use approach bellow:

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 90%;
  height: 90%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.flip-card {
  background-color: transparent;
  width: 200px;
  height: 200px;
  perspective: 1000px;
  float: right;
  margin: 1em;
}

.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.6s;
  transform-style: preserve-3d;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front, .flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  float: right;
}

.flip-card-front {
  background-color: #98D0F0;
  color: black;
  width:200px;
  height:200px;
}

.flip-card-back {
  background-color: #98BBF0;
  color: white;
  transform: rotateY(180deg);
  width:200px;height:200px;
}
.card {
  background-color: transparent;
  width: 200px;
  height: 200px;
  perspective: 1000px;
  float: left;
  margin: 1em;
}
</style>
</head>
<body>

<h2>Modal Example</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">
    <div class="card">
        <p>CERT Services</p>
    </div>
</button>

<!-- The Modal -->
<div style="display:none;">
  <div id="myModal" class="modal">
    <!-- Modal content -->
    <div class="modal-content">
    <span class="close">&times;</span>
        <div class="flip-card">
    <div class="flip-card-inner">
    <div class="flip-card-front">
      
    </div>
    <div class="flip-card-back">
  
    </div>
    </div>
  </div>
</div>

<script>
$(document).ready(function () {
    SP.SOD.executeFunc("sp.js", "SP.ClientContext", function(){
      console.log("SharePoint Library objects loaded with successfull.");
    });
});

function genericSharePointExecution(dialogFunction, jsFileRef) {
    ExecuteOrDelayUntilScriptLoaded(dialogFunction, jsFileRef);
}

function openDialog(selector, closeBtn) {
    $(this).hide();
    var options = SP.UI.$create_DialogOptions();
    //options.title = "If you want put some title here";
    options.width = 800;
    options.showClose = closeBtn;
    options.html = document.querySelector(selector);
    options.dialogReturnValueCallback = Function.createDelegate(null, closeCallback);
    SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.showModalDialog', options);
}

function closeCallback(dialogResult, returnValue) {
    if (dialogResult == SP.UI.DialogResult.Ok) {
        SP.SOD.execute('sp.ui.dialog.js', 'SP.UI.ModalDialog.RefreshPage', SP.UI.DialogResult.Ok);
    }
}

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// When the user clicks the button, open the modal 
btn.onclick = genericSharePointExecution(function(){
         openDialog("#myModal", true); }, 'sp.js');
</script>

</body>
</html>
1
  • Thanks, I'll try using this as a starting point. And learn more about how to use JS in SP. Much appreciated. – anabura Jan 29 at 7:35
0

Add type to the button:

<button id="myBtn" type="button">
        <div class="card">
            <p>CERT Services</p>
        </div>
    </button>
2
  • Good point. :D It works with this as well. – anabura Jan 29 at 7:36
  • You could mark my post as the answer and voit it. Thank you. – Amos Jan 29 at 7:40

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.