Adding Modals

• 

  studentludwpe99 · Member · Oct 12, 2019 at 1:52 am

  • Copy link
  • Add topic to favorites

  How do I add modals to my page? If I insert some code into an HTML builder, like W3 Schools, it works perfectly; however, trying to plug it into WordPress, it doesn’t work. Here’s the coding:

  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(1,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
  }

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

  }

  Test

  
  Click

  Test

  // Get the modal
  var modal = document.getElementById(‘myModal’);

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

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

• 

  kokkieh · Staff · Oct 12, 2019 at 10:24 am

  • Copy link

  Hi there,

  On what site are you working? The account you’re using to post here does not own any sites on WordPress.com.

  If you’re using the open source WordPress software at another host, please ask for help at https://wordpress.org/support/forums instead.