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="link">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">&#215;</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>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">
              ...

JavaScript

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

        // Abrir o modal ao clicar na classe p que você mandou...
        $destaque.on('click', function (e) {
          e.preventDefault();
          $modal.modal();
        });
        
        // Fechar modal ao clicar no close
        $close.on('click', function (e) {
          e.preventDefault();
          $modal.modal('hide');
        });
}());