JSFiddle - React, Tailwind, and code Playground

by rodrigonery

HTML

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.1.1/bootstrap.min.js"></script>
 

<p class="destaque-car">Veja nosso cardápio!</p>

    
<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
<div class="well">
    <ul class="nav nav-tabs">
      <li class="active"><a href="#home" data-toggle="tab">Profile</a></li>
      <li><a href="#profile" data-toggle="tab">Password</a></li>
    </ul>
    <div id="myTabContent" class="tab-content">
      <div class="tab-pane active in" id="home">
        <form id="tab">
            <label>First Name</label>
            <input type="text" value="John" class="input-xlarge">
            <label>Last Name</label>
            <input type="text" value="Smith" class="input-xlarge">
            <label>Email</label>
            <input type="text" value="[email protected]" class="input-xlarge">
            <label>Address</label>
            <textarea value="Smith" rows="3" class="input-xlarge">2817 S 49th
    Apt 314
    San Jose, CA 95101
            </textarea>
            <label>Time Zone</label>
            <select name="DropDownTimezone" id="DropDownTimezone" class="input-xlarge">
              <option value="-12.0">(GMT -12:00) Eniwetok, Kwajalein</option>
              <option value="-11.0">(GMT -11:00) Midway Island, Samoa</option>
              <option value="-10.0">(GMT -10:00) Hawaii</option>
              <option value="-9.0">(GMT -9:00) Alaska</option>
              <option selected="selected" value="-8.0">(GMT -8:00) Pacific Time (US & Canada)</option>
              <option value="-7.0">(GMT -7:00) Mountain Time (US & Canada)</option>
              <option value="-6.0">(GMT -6:00) Central Time (US & Canada), Mexico...

JavaScript

$(function () {
    var $modal = $('div.modal'),
        $destaque = $('.destaque-car'),
        $close = $('a.close-modal');
        

        // Abrir o modal ao clicar no botão
        $destaque.on('click', function(e) {
          e.preventDefault();
          $modal.modal();
        });
        
        // Fechar modal ao clicar em cancelar
        $close.on('click', function(e) {
          e.preventDefault();
          $modal.modal('hide');
        });
});