jQuery Modal

index.html

<div class="bs-example">
  <!-- Button HTML (to Trigger Modal) -->
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-num="0">Question 1</button>
  <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" data-num="1">Question 2</button>

  <!-- Modal HTML -->
  <div id="myModal" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title">Modal Window</h4>
        </div>
        <div class="modal-body">

          <div class="btn-group" id="carsSelect" data-toggle="buttons">
            <div class="radio">
              <label>
                <input type="radio" name="cars" value="Tesla Model 3">Tesla Model 3
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="cars" value="leaf">Nissan Leaf
              </label>
            </div>
            <div class="radio">
              <label>
                <input type="radio" name="cars" value="bolt">Chevy Bolt
              </label>
            </div>
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-primary" onclick="submit()">Submit</button>
        </div>
      </div>
    </div>
  </div>
</div>    

jquery-modal.markdown

jQuery Modal

A Pen by B Morgan Murrah on CodePen.

License.

script.js

var questions = [
  {
    prompt: 'Choose an EV',
    options: ['Tesla Model S', 'Nissan Leaf', 'Chevy Bolt'],
    correctAnswer: 'Tesla Model S'
  },
  {
    prompt: 'Choose a fruit',
    options: ['Apple', 'Orange', 'Banana', 'Peach'],
    correctAnswer: 'Apple'
  }
];

function submit() {
  var selected = $(".modal-body input:checked").val();
  alert('You selected ' + selected);
}

function getOptions(question) {
  var $buttonDiv = $('<div class="btn-group" data-toggle="buttons"></div>');
  question.options.forEach(function(opt) {
    var $div = $('<div class="radio">');
    var $label = $('<label></label');
    var $input = $('<input type="radio" name="opts" value="' + opt + '">');

    $label.append($input);
    $label.append(opt);

    $div.append($label);
    $buttonDiv.append($div);
  });
  return $buttonDiv;
}

function showQuestion(event, $modal) {
  var button = $(event.relatedTarget);  // Button that triggered the modal
  var num = parseInt(button.data('num'));
  var question = questions[num];
  $modal.find('.modal-title').text(question.prompt);
  $modal.find('.modal-body').append(getOptions(question));
}

$(function() {
	$("#myModal").on('show.bs.modal', function(event) {
    showQuestion(event, $(this));
  });
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

style.css

.bs-example {
  margin: 20px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />