JSFiddle - React, Tailwind, and code Playground

by Hifni Nazeer

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- Button trigger modal -->
<input type="text" class="wordsearch" placeholder="Type Here" />

<br>


<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-sub-medium="Email" data-sub-content="daily" data-sub-addressid="[email protected]" data-sub-subscribed="true">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" id="myModal">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title">Why Decline?</h4>
      </div>
      <div class="modal-body">
        <div class="form-group">
          <label class="control-label col-md-2">Medium</label>
          <div class="col-md-10">
            <input type="text" class="form-control" value="" id="txtSubscriptionMedium" readonly />
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-md-2">Content</label>
          <div class="col-md-10">
            <input type="text" class="form-control" value="" id="txtSubscriptionContent" readonly />
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-md-2">Id</label>
          <div class="col-md-10">
            <input type="text" class="form-control" value="" id="txtSubscriptionAddressId" readonly />
          </div>
        </div>
      ...

CSS

.ui-autocomplete
{
    z-index: 99999 !important;
}

JavaScript

$(function() {
  $('#myModal').on('show.bs.modal', function(e) {
    var button = $(e.relatedTarget); // Button that triggered the modal
    var addressId = button.data('sub-addressid');
    var medium = button.data('sub-medium');
    var content = button.data('sub-content');
    var subscribed = button.data('sub-subscribed');

    var modal = $(this);
    modal.find('#modalSubmit').data('sub-addressid', addressId);
    modal.find('#modalSubmit').data('sub-content', content);
    modal.find('#modalSubmit').data('sub-subscribed', subscribed);

    modal.find('.modal-title').html(addressId);
    modal.find('.modal-body').find('#txtSubscriptionMedium').val(medium);
    modal.find('.modal-body').find('#txtSubscriptionContent').val(content);
    modal.find('.modal-body').find('#txtSubscriptionAddressId').val(addressId);
  });

  $('#myModal').find('#modalSubmit').click(function(e) {
    e.preventDefault();
    var target = $(event.target); // Button that triggered the modal
    var addressId = target.data('sub-addressid');
		
		alert(addressId);

    var modal = $(this).parent;
		console.log(modal);
		var medium = modal.find('.modal-body').find('#txtSubscriptionMedium').val();
		var content = modal.find('.modal-body').find('#txtSubscriptionContent').val();
		
		alert('Values Id: ' + addressId + ' Medium: ' + medium + ' Content: ' + content)
  });
});