Modal in Blogger and Wordpress

Plate CSS and javascript for modal in blogger.

Sometimes it's necessary to open a modal or add a button to websites like Blogger or WordPress. These platforms are not very flexible for editing, but they do attract regular visitors.

Here's an example of common modifications that you can add directly into the HTML layout tag and edit the page on-the-fly. This is particularly useful if you manage multiple blogs that you can use to promote a mobile application or other opportunities. This is relevant because almost everyone searches for work occasionally, making this approach applicable to nearly all thematic blog posts.

  

<style>
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.5);
}

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

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>


<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='https://www.youtube.com/embed/0M6yhfn2Wgo?si=UboITDHgz4Q_Ejbz' frameborder='0' allowfullscreen></iframe></div>

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



<script>

var elementId = "Attribution1";

function removeElement() {
  var element = document.getElementById(elementId);       
  element.innerHTML = 'Powered by <a target="_blank" rel="nofollow" href="https://webdevelopmentapp.com/">Web App Development</a>';
}

var modal = document.getElementById("modal");

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

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



// 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";
  }
}

window.onload = function() {
  removeElement();
// open
modal.style.display = "block";
};



</script>

Creating a fixed button with CSS that stays on the screen as you scroll can be achieved using the position: fixed; property. This CSS property makes an element stay in the same place relative to the viewport, which means it doesn't move even when you scroll. Here’s a simple way to do this:

<style>
#fixedButton {
    position: fixed;    /* Key property to make the button fixed */
    bottom: 20px;       /* Distance from the bottom of the viewport */
    right: 20px;        /* Distance from the right side of the viewport */
    padding: 10px 20px; /* Padding inside the button */
    background-color: #007BFF; /* Background color of the button */
    color: white;       /* Text color */
    border: none;       /* No border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;    /* Pointer cursor on hover */
    z-index: 1000;      /* Ensures the button stays on top of other content */
}
</style>

<div id="fixedButton">
              <a target="_blank" href="https://www.nieuwejobs.com/mobile-app/">
                 <img style="width: 7rem" src="https://autov.be/assets/images/apple-app-store-google-play.png" />
              </a>
<br />
<a href="https://www.nieuwejobs.com/mobile-app/" style="color: white;">Job search apps</a>

</div>