JSFiddle - React, Tailwind, and code Playground

by suphalak_26

HTML

<script src="http://cdn.jquerytools.org/1.2.7/full/jquery.tools.min.js"></script>
<!-- the triggers -->
<p>
  <button class="modalInput" rel="#prompt">User input</button>
</p>
 
<!-- user input dialog -->
<div class="modal" id="prompt">
  <h2>This is a modal dialog</h2>
 
  <!-- input form. you can press enter too -->
  <form>
    <input type="text" id="iTextId"/>
    <button type="submit" class="close"> OK </button>
    <button type="button" class="close"> Cancel </button>
  </form>
  <br />
   
</div>
<form>
     <input type="text" id="testOutPut"/>
</form>

CSS

.modal {
    background-color:#fff;
    display:none;
    width:350px;
    padding:15px;
    text-align:left;
    border:2px solid #333;
 
    opacity:0.8;
    -moz-border-radius:6px;
    -webkit-border-radius:6px;
    -moz-box-shadow: 0 0 50px #ccc;
    -webkit-box-shadow: 0 0 50px #ccc;
  }
 
  .modal h2 {
    background:url(/media/img/global/info.png) 0 50% no-repeat;
    margin:0px;
    padding:10px 0 10px 45px;
    border-bottom:1px solid #333;
    font-size:20px;
  }

JavaScript

var triggers = $(".modalInput").overlay({
 
      // some mask tweaks suitable for modal dialogs
      mask: {
        color: '#ebecff',
        loadSpeed: 200,
        opacity: 0.9
      },
 
      closeOnClick: false
  });

 $("#prompt form").submit(function() {
    // closeOnClick: false
     //var text = iTextId.val();
    // jQuery('#testOutPut').val(text);
     
      // close the overlay
      //triggers.eq(1).overlay().close();
 
      // get user input
     // var input = $("input", this).val();
 
      // do something with the answer
      //triggers.eq(1).html(input);
 
      // do not submit the form
      //return e.preventDefault();
  });