How to make a button inside a modal trigger an action inside a frame?

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">&times;</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.

Hi @shirleymanson, there are several issues with your newmodal.htm file:

  • The iframe is outside the <html> tags
  • There are 2 missing closing </div> tags after the modal
  • The button and script is again outside the html
  • There is no element with an ID myBtn (should presumably be idx_get_second_form?)

Anyway after fixing those that button is still not clickable simply because it is hidden behind the absolutely positioned iframe… if you position it somewhere else it does work and the modal shows.

Thanks M3g4pOp for reviewing my topic… I have a couple of questions about your comments, but first i need to add the modal open command that was somehow left out… and the modal will then open normally… and will be positioned on the right hand side while the iframe is on the left hand side. Additionally i found a / missing on a button that did not affect it but should be there as it worked fine w/o it…
First:

OPEN MODAL The Open Modal button somehow got lost in the move to the forum and is the reason the modal did not open...the location where the button goes is just below the Trigger open which is in fact in the program so just dump it there. Second
<div><h7><button id="idx_get_second_form">Get1Works<button></h7</div>
<div><h7><button id="idx_get_second_form">Get1Works</button></h7</div>

The missing backslash did not keep it from working but should be there of course.

Can you tell me how to add code in the reply… I used the special code for it and it worked in the original post but does not work in the reply… maybe since its a link but local only… this link worked in the original…
And I assume there is no way to edit the original post at this time… I can try to set this up on one of the remote programs like jsfiddle so that you can look at it if yu like… but not sure which one is the best program to use…since i have not used one of those before…
Thanks…for your help… I really appreciate it…

This is the reason the modal would not open… i tried to add it in the comment above but it would not show up… Simply add the OPEN MODAL line in the above Modal program directly under the Trigger line that is shown in the modal but the button command is missing.

<!-- Trigger/Open The Modal -->
<center><button id="myBtn">OPEN MODAL</button></center>

Ah I see, thx… you want the script from the iframe to also apply to the button on the parent page? This will indeed not work this way, you have to include a dedicated event listener in newmodal.html that will add content to the iframe (this is a separate document which can be accessed via the iframe’s contentDocument property)… using jQuery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
  var iframe = document.getElementById('myiframe')

  $('#idx_get_second_form').click(function () {
    $('#div1', iframe.contentDocument).load('hello.txt')
  })
</script>

I just saw this will try that tomorrow… thank you so very much…

PERFECT! Thank you so much m3g4p0p that worked great… I will look up some of your answers and learn lot you are soooooo smart… Thankyou!
SOLVED!

1 Like

Happy to help. :-)