Lance J

Thanks, I'll head down that path...

I actually did try the Bootstrap stuff but ran into a conflict between the event handler and prototype.js so I backed off from Bootstrap.

I've not played with innerHTML so I'll do the research and give it a go.

Thanks @justsomeguy... while I like to think I know what I'm doing, the more I learn the less I know

I suggested I have to rethink this thing as the dialog box or window needs to show different info based on which button was clicked.

So that means I can't create the dialog when the main window shows as the info in that dialog will be static.

Guess I could use AJAX to update the dialog but I'm thinking it's probably best to build the dialog on the fly when the user clicks on a button.

So it's back to square one for me and trying to find good examples of what I want to do.

Thanks again for you help and feel free to throw more great ideas please.

9 hours ago, Lance J said:

I am using the W3Schools CSS/JS modal dialog example: https://www.w3schools.com/howto/howto_css_modals.asp

However I would like to be able to pass a parameter from the button to the modal window as a variable so I can use it to perform a database query and populate the modal.

I HAVE looked through this site and others and can't find a straight forward way to do this.

 

My code:

The button:  

<button onclick='myModal($somevariable)'>Show modal</button>

The click function:   

function myModal(myParams) {  modal.style.display = "block"  }

The modal:   

var modal = document.getElementById('myModal');

The HTML on the webpage:

<!-- The Modal -->
<div id="myModal" class="modal">

 <!-- Modal content -->
 <div class="modal-content">

  <div class="modal-header">
    <span class="close">×</span>
    <h2>Shot Plot</h2>
  </div>

  <div class="modal-body">
    <p>Some stuff in the Modal Body using the myParams variable??</p>
    <p>Some other text...</p>
  </div>

  <div class="modal-footer">
    <h3>footer</h3>
  </div>

 </div>
</div>

 

Any help appreciated,

Lance

Actually I think I will have to rethink this whole idea and consider using AJAX to update the dialog. Any thoughts appreciated please.

I am using the W3Schools CSS/JS modal dialog example: https://www.w3schools.com/howto/howto_css_modals.asp

However I would like to be able to pass a parameter from the button to the modal window as a variable so I can use it to perform a database query and populate the modal.

I HAVE looked through this site and others and can't find a straight forward way to do this.

My code:

The button:  

<button onclick='myModal($somevariable)'>Show modal</button>

The click function:   

function myModal(myParams) {  modal.style.display = "block"  }

The modal:   

var modal = document.getElementById('myModal');

The HTML on the webpage:

<!-- The Modal -->
<div id="myModal" class="modal">

 <!-- Modal content -->
 <div class="modal-content">

  <div class="modal-header">
    <span class="close">×</span>
    <h2>Shot Plot</h2>
  </div>

  <div class="modal-body">
    <p>Some stuff in the Modal Body using the myParams variable??</p>
    <p>Some other text...</p>
  </div>

  <div class="modal-footer">
    <h3>footer</h3>
  </div>

 </div>
</div>

Any help appreciated,

Lance