I have a modal with a button that i want to trigger a jquery button inside an iframe which will simply load the words hello dolly into a div1 located in the iframe. I have tried every imaginable code that i can think of and many i found by searching the web but none seem to be able to trigger the file. To see what should happen you can click the button Get1Works in the iframe area as it loads the words “Hello Dolly” into the red window. However if you Click the Get1Fails at the modem file is the problem.
Below is what my modal looks like:
In the modal below i have marked the button that needs to trigger the button in the IFRAME:
The below file is named newmodal.htm
<iframe src="myiframe.htm" name="foo" id="myiframe" style="position: absolute; bottom:10 right:30; width:200;height:400; border: 10;border: solid;"></iframe>
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1500; /* Sit on top */
padding-top: 100px; /* Location of the box */
right:5px;
top:5px;
width: 20%; /* Full width */
height: 50%; /* 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 */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<!-- Trigger/Open The Modal -->
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
Some modal content here.
</body>
</html>
<!-- This button needs to trigger the jquery form load at the iframe. -->
<h7><button id="idx_get_second_form">Get1Fails</button></h7>
<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 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>
BELOW IS my IFRAME file: This will load inside the iframe
file name is myiframe.htm
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<style>
#div1 {
position: absolute;
border: 1px solid red;
z-index: 5000;
top: 200px;
left: 8x;
width: 80px;
height: 100px;
overflow: hidden;
}
</style>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("hello.txt");
});
});
</script>
</head>
<body>
<div id="div1"></div>
<!--
This button works fine and will load the words "Hello Dolly" just fine...
But bottom line is i need the button in the Modal to activate the jquery above.
-->
<div><h7><button id="idx_get_second_form">Get1Works<button></h7</div>
</body>
</html>
BELOW IS THE TEXT FILE I am loading into the jquery load.
File name is hello.txt
Hello Dolly.