I'm trying to have a javascript modal window pop up on a php page within an Angular single page application. This page is loaded in after the initial index.html. The html tags are written as:
<html ng-app="myApp" class="ng-scope">
...and the content from pages that are loaded in are stored within:
<div ng-view="" class="ng-scope">
There is javascript within a particular php page that is throwing an error. Here is the full php page, including the javascript at bottom:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<img id="popup_img" src="#">
</div>
</div>
<div id="screenings">
<?php
$db = mysqli_connect("localhost", "root", "", "database");
$sql = "SELECT * FROM screenings";
$result = mysqli_query($db, $sql);
while ($row = mysqli_fetch_array($result)){
echo "<div id='img_div' onClick='btn()'>";
echo "<img id='img_screenings' class='modal_img' src='images/".$row['image']."' >";;
echo "<p id='screenings_p' align='center'>" .$row['venue']."</p>";
echo "<p id='location_p' align='center'>" .$row['location']."</p>";
echo "<p id='date_p' align='center'>".date('F j, Y',strtotime($row['date']))."</p>";
echo "</div>";
}
?>
</div>
<script>
$document.ready(function(){
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
//var btn = document.getElementsByClassName("modal_img");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
$("img").on("click", function() {
var source = ( $(this).attr("src") );
//alert(source);
//$('#modal_popup').text(source);
$('#popup_img').prop('src', this.src);
});
// When the user clicks the button, open the modal
function btn() {
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>
Specifically, I'm getting this error in the Chrome console: "Uncaught ReferenceError: btn is not defined at HTMLDivElement.onclick"
btnfunction is defined inside the anonymous function passed to$document.ready. Try to define it like thiswindow.btn = function(){....}window.btn = function btn() { modal.style.display = "block"; }- this still seems to be throwing the error, unfortunately.$document.ready(function(){to$(document).ready(function(){$(document).ready(function(){- stills seems to be throwing the error.