Dynamically set HREF value within modal window (bootstrap/jquery)

Question

I'm trying to figure out how to add change the value of an HREF within a modal based on the various links that users click on to activate the modal.

For instance I have 3 links which open the exact same modal window:

<a href="#" target="_blank" data-toggle="modal" data-target="#mymodal">Modal-1</a>
<a href="#" target="_blank" data-toggle="modal" data-target="#mymodal">Modal-2</a>
<a href="#" target="_blank" data-toggle="modal" data-target="#mymodal">Modal-3</a>

The information contained in the modal window is the same for all 3, but the tag within the modal window will redirect to a different location based on the link the user clicked on to open the modal.

Here's the modal markup:

  <div class="modal-content">
    <div class="modal-header">
      <button type="button" class="close" data-dismiss="modal">X</button>
      <h1 class="modal-title">My Modal Window</h1>
    </div>
    <div class="modal-body">
      <p>My copy goes here</p>
    </div>
    <div class="modal-footer"> 
        <a id="closemodal" href="DEPENDS ON LINKED CLICKED TO OPEN MODAL" class="btn btn-primary" target="_blank">GO</a>
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    </div>
  </div>

Steve_B19 · Accepted Answer · 2016-07-21 20:34:41Z

3

You can use jQuery attr(key, value) to change href of hyperlink.

<a href="#" target="_blank" data-toggle="modal" data-target="#mymodal" data-link="google.com">Modal-1</a>

$('a').click(function() 
{
    $('#closemodal').attr('href', $(this).data('link'));
});

https://jsfiddle.net/kaofgend/3/

answered Jul 21, 2016 at 20:34

Steve_B19

5483 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stangn99 Over a year ago

Thanks. Worked great.

Collectives™ on Stack Overflow

Dynamically set HREF value within modal window (bootstrap/jquery)

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related