Passing variable from button to modal

Question

This is an angular 1 with bootstrap.

I have two buttons:

<button type="button" data-toggle="modal" data-target="#myModal" data-name="jack">
    Btn 1
</button>

<button type="button" data-toggle="modal" data-target="#myModal" data-name="jill">
    Btn 2
</button>

I have then a modal:

<div id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                Hello name
            </div>
        </div>
    </div>
</div>

I am aware that this can be quite easily be done with a javascript controller. But I wonder if it is possible to solve this without javascript. If Btn 1 is clicked I want to show the text Hello jack. And Hello jill if Btn 2 is clicked. Basically: can I read directly in the view the variable data-name?

1) Define data value shared. 2) Create event when clicking buttons. 3) Implement data-binding mark up at modal. — Hoon, Oct 01 '18 at 09:32

score 1 · Answer 1 · answered Oct 01 '18 at 09:43

1st of all this is not possible without java-script. If you check all the attributes of button or even input type button,You have to use onclick for firing any event on button click and onclick most of the time calls functions written in scripts. You can only navigate to other pages with type=submit or with href.

So from my point of view it is mostly not possible.

score 1 · Answer 2 · answered Oct 01 '18 at 10:05

You can do this. Its easier if you create a modal factory to reusable the modals. I found a clear example to help you:

https://stackoverflow.com/questions/25341798/how-do-i-add-a-reusable-modal-dialog-in-angular

If you don't understand, here it's other example:

https://codepen.io/capelo/pen/wKeEA

Good class.

Alberto Favaro · Answer 3 · 2018-10-01T10:34:49.427

Is not possible without Javascript, but is possible without adding Javascript. You can play with somes <div> inside the modal and toggle-collapse on you want to show. The only problem is that you can't pass the text with data attribute but i think it's the same thing that you want.

In my opinion it is better to write a few lines of Javascript but you asked if you can do it without adding custom Javascript and here is my answer. And if there are custom data attributes, it's because they must be used with Javascript. I hope to be helpful.

JSFiddle: https://jsfiddle.net/alvarofvr/p9fzydt7/22/

Code Snippet:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<span data-toggle="collapse" data-target="#jackText,#jackButton">
  <button type="button" data-toggle="modal" data-target="#myModal">
    Btn 1
  </button>
</span>

<span data-toggle="collapse" data-target="#jillText,#jillButton">
  <button type="button" data-toggle="modal" data-target="#myModal">
    Btn 2
  </button>
</span>

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <div id="jackButton" class="collapse">
          <button type="button" class="close" data-toggle="collapse" data-target="#jackText,#jackButton" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <div id="jillButton" class="collapse">
          <button type="button" class="close" data-toggle="collapse" data-target="#jillText,#jillButton" data-dismiss="modal" aria-hidden="true">&times;</button>
        </div>
        <h4 class="modal-title">"Hello Jack" or "Hello Jill"?</h4>
      </div>
      <div class="modal-body">
        <div id="jackText" class="collapse">
          Hello Jack
        </div>
        <div id="jillText" class="collapse">
          Hello Jill
        </div>
      </div>
    </div>
  </div>
</div>

Passing variable from button to modal

3 Answers3