HTML Modal Not Opening

I am currently trying to get a simple modal to work within HTML but am having some trouble. I believe it might be with the <div> placements I have but am not sure. Can someone please take a look a let me know what I am doing wrong here?

Here is the code I am using:

<style type="text/css">     .cdynamic-template h2 {         font-size: 24px;         font-weight: 450;         color: "[theme:neutralPrimary, default:#323130]";     }      .cdynamic-template .cdynamic-items .cdynamic-item {         background: "[theme:bodyBackground, default: #fff]";         border: 1px solid "[theme:neutralLight, default: #edebe9]";         //box-shadow: 0px 0px 6px #bfbebe;         margin-bottom: 15px;     }      .cdynamic-template .cdynamic-items .cdynamic-item h3 {         background: "[theme:accentButtonBackground, default:#0078d4]";         color: "[theme:accentButtonText, default: #fff]";         padding: 5px 5px 7px 10px;         margin: 0px;         background-color: #3a4678;     }      .cdynamic-template .cdynamic-items .cdynamic-item .cdynamic-item-fields {         padding: 10px;     }      .cdynamic-template .cdynamic-items .cdynamic-item .cdynamic-item-fields span {         display: block;         font-size: 14px;     }      .cdynamic-item {         float: left;         width: 325px;         height: 200px;     }      /* The Modal (background) */     .modal {         display: none;         /* Hidden by default */         position: fixed;         /* Stay in place */         z-index: 1;         /* Sit on top */         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/Box */     .modal-content {         background-color: #fefefe;         margin: 15% auto;         /* 15% from the top and centered */         padding: 20px;         border: 1px solid #888;         width: 80%;         /* Could be more or less, depending on screen size */     }      /* The Close Button */     .close {         color: #aaa;         float: right;         font-size: 28px;         font-weight: bold;     }      .close:hover,     .close:focus {         color: black;         text-decoration: none;         cursor: pointer;     } </style>   <!-- The Modal --> <div id="myModal" class="modal">  <!-- Modal content --> <div class="modal-content">      <span class="close">&times;</span>      <p>Some text in the Modal..</p> </div> </div>            <div class="cdynamic-template">     <h2>Most Recent Creatives         <br><a href=https://ewscripps.sharepoint.com/sites/LighthouseIdeas/SitePages/Creatives.aspx>See All...</a>     </h2>     <div class="cdynamic-items">         {{#each items}}         <div class="cdynamic-item">             <h3>{{Title.textValue}}</h3>             <div class="cimage">                 <img                     src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAABmJLR0QA/wD/AP+gvaeTAAAEYklEQVRoge3Y64tUdRzH8ffvzM7e15ldM9JtvIURQRAUhQRlSkYQIT0RFCLE/gfRQBFJicgHEmSXJ0E+CYKCJFPZjTKjjKB6EOSNzRtedkd3ZndmZ87304NzZtzx7Obcthac75OZc85vfr/X53x/h2EGWtWqVrWqVfdyuWoGXXtlS1+ny6ccSjnZIJAyGMQ0ACSRkhJJUB8ijgSoW6IDCcGkk3ISgOWRGwfSyNISaYeuSbqMMeLwLxR8XcxZ30jq5GeTdQW4+fKmVTFPW3FuPbACSAAEMJAEAhBI4enwXIAPX4LxlWNmOjfL59ANSWfw9bW18f6i745cvmuAzIZNryPeA7orLvzXeClcqzxm1MxeW/TTsa9mDZDZsHkd0hEgNs/wKJgj63msHjh57PcSzat0as88xoPo8Yv25owdmHh184Pma6SiK/MLX7qey/Ra/4rh4VxFB8zXI/Xhw/klCjKKZnOJB9TZd8tWlJjlAM6xsr47H1zL+kUmn3ic7GOPMl4sYGZzgQ+OLfZwido2zbyynjtfep8v+izfvR0Xj5M+cpyxAwfpyU7S7rzm4iV8WDVzB2rCV24RQ7h4HIDki+tIfXKQ/Oonw26oafjwOBoAsyX14stjplXbQD+pt3ayYNc2xro6yMtvDl7gUCoSQHIDDeFVGaBUibXPsuzTD5la/VTQjfLc9eGRwFgUDYCSzcZXdGPfLhK7tzPW3UnO/PrxCOHfFwmA6GkIf5cQAIl1z7H80McUnnma8WIRk9WOl8BcbzQAam8EX4UfCLqx9O3dJPfsIN3TRcGsNnywdmc0gNTeGL7KBGElXnieZYc+ItvdjWrBB9eiARrG1+a/XbXjARUiAUBTDeGr3UNhpY8OcX7jFrozWVwt+OA4XZqn/E2MmCJsTX346gIUb4xyce+7aOh7Ep6H56gNH6w/UwBlgQX14qtpQProEFf37qd3PEO7F6uYowY8km5FA8CYpMV14/8lQPmuD5+g3/NwuEbwII1FAkg2WkbUjJ9dnz46xNV9++kdz9LhxWp/YKP4WbaQ6RLO1Y+/I0T5rn97gn4vhodrEh6cuBIJ4PDOSfX/GEFCUwVce5yxw99w/Z0D9GQn6PDabgOagEfCdzoTCWDOP4uV9mZteEl0eY6/t+1EuTw69StJz8PDazpeCK/I2Rm2UOws+HXhkehybRR/OIUQcS9WCWoiHgmTK3eg/EXmF/VnuFrN+GBfijYH8fBjc4VH5CZi6fORAAuHP78A/FgP/o4F5hKPM32x6vTpfCRAQNYOieJ8xSNlnFfcM91cEaD/+JdDiK0YE/MOb7rhYxsfOPPbH9PNM/65m1770kNm3huYW49sJZD4n/CjGH85OBwz74P7z/985U5rVX+vX12zpjfmdy3F/EH53qBzWirZYtBCRD+mhExJnLoQPSGoE9EV4ick5cOHPeNLk05K49xNZ5Y27Dqmy8iNOHTBsItkGFly6ZeJanytalWrWtWqe7f+AVrzIKbgsx9BAAAAAElFTkSuQmCC">             </div>             <div class="cdynamic-item-fields">                 <!-- Trigger/Open The Modal -->                 <button id="myBtn">Open Modal</button>                 <span class='cms-DetailsRow-cell'><strong>Industry: </strong>{{Industry.textValue}}</span>                 <span class='cms-DetailsRow-cell'><strong>Description: </strong>{{Description.textValue}}</span>                 <span class='cms-DetailsRow-cell'><strong>Video Type: </strong>{{VideoType.textValue}}</span>             </div>         </div>         {{/each}}     </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 on 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> 

Any help in the right direction will be much appreciated! Thanks!

Add Comment
1 Answer(s)

You have comment mistake for CSS CSS uses /* */ (block comments) not //

//box-shadow: 0px 0px 6px #bfbebe; 

Checkout this line, replace it with

/*box-shadow: 0px 0px 6px #bfbebe;*/ 

And everything will work just fine

Answered on July 16, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.