Jump to content
Lance J

Passing parameters to modal dialog

Recommended Posts

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

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

There's no problem with passing values to the onclick function, although the variables need to be in the correct scope.  Another way to do it is to put everything in data attributes on the button, and then pass the entire button to the function where you can access its attributes and values.  e.g.:

 

<button data-id="some id" data-value2="some other value" onclick='myModal(this)'>Show modal</button>

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Why can't you just have different buttons pass the different data?  The showModal function would expect certain data, like title, message, etc and use something innerHTML on elements inside the modal to change their values dynamically.  There is certainly a way to have multiple buttons re-use the same modal, in fact this is the cornerstone premise of UI libraries like Bootstrap.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×