Help on custom popup modal form in forum homepage

[sweetinvader404]

Hello Everyone

Is there a proper way to implement a popup modal custom html code for a specific page only like the forum homepage? I have a prosilver style activated into my forum and I am writing a custom HTML5 popup modal form to show only in homepage, I deleted a search code in prosilver template to see if the changes were reflected and it is. I added a custom HTML5 popup modal form in the prosilver template in overall_header.html file, Some has experiencing 500 error in their browser, what could be the problem?I am not even editing any php code just the html5 custom code added on that file.. Which file should I edit to paste my custom html5 popup modal form to show only in forum homepage? I hope someone can help me fix the issue

here is my code:

Code: Select all

<style>
body {font-family: Arial, Helvetica, sans-serif;}


.modal {
  display: none; 
  position: fixed; 
  z-index: 1; 
  padding-top: 0px;
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4); 
}


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


.popup img,.popup p{
    display:inline;
}
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

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

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

 
  <div class="modal-content">
    <span class="close">&times;</span>
            <ul>
                <li><img src="https://sailorbob.virtualombudsman.com/phpBB3/images/popup/trident-logo-new.png" height="40px"></li>
                <li><h3>LOW RATES </h3></li>
            </ul>       
  </div>

</div>

<script>

var modal = document.getElementById("myModal");
document.getElementById("myModal").onload = function() {myFunction()};
function myFunction() {
    modal.style.display = "block";
}

var btn = document.getElementById("myBtn");


var span = document.getElementsByClassName("close")[0];


btn.onclick = function() {
  modal.style.display = "block";
}


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


window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}
</script>

Regards

[stevemaury]

Moving to Styles Support and Discussion

[Mannix_]

IF you want only on index page wrap your code in

Code: Select all

 {% if SCRIPT_NAME in ['index'] %} YOUR CODE {% endif %} 

edit
add css to any css file
html to overall_header and js to overall_footer.

[sweetinvader404]

Thank you very much i will try and update u later