JSFiddle - React, Tailwind, and code Playground

by Matt Rummler

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Large modal -->
<button type="button" class="btn btn-primary" data-controls-modal="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div id="modalLarge" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" ><!--aria-hidden="true">-->
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      Hi this should be content for the modal... the large modal that is
    </div>
  </div>
</div>

<!-- Small modal -->
<button id="smallButton" type="button" class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div id="modalSmall" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      This is the modal content I guess??
    </div>
  </div>
</div>

<div id="testingResults">
    Testing results go here
</div>

JavaScript

function testMessage(message)
{
    message=message || 'The selector worked so something else must be wrong';
    alert(message);
    $('#testingResults').html(message);
}
/*
$('div[class^=modal').modal({
    keyboard: true;
});
*/
$('div[class^=modal')..modal('toggle');
$("button[id=smallButton").on("click",function()
{
  testMessage('The selector for the small button worked!');
});
$("button[data-target$='lg'").on("click",function()
{
   testMessage('The selector for the large button worked!');                     
});

var currentContext=$('body[class^=modal');
if(typeof(currentContext)!= 'undefined')
{
    testMessage();
}