JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://myportfoly.besaba.com/site/js/bootstrap.min.js"></script>
<link href="http://myportfoly.besaba.com/site/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<button>Модальное окно</button>






<div class="modal hide fade" id="modal">
    <div class="modal-header">
        <button class="close" data-dismiss="modal">×</button>
         <h3>Добавить элемент</h3>

    </div>
    <div class="modal-body modal">
        <form class="form-horizontal edit-form">
            <input id="content-id" type="hidden" value="0">
            <div class="control-group">
                <label class="control-label" for="content-type">Виберите модель</label>
                <div class="controls">
                    <select id="content-type">
                        <option value="root">Корень</option>
                        <option value="user">Пользователь</option>
                        <option value="page">Страница</option>
                        <option value="background">Фоновый слой</option>
                        <option value="gallery">Галерея</option>
                        <option value="image">Изображение</option>
                        <option value="news">Новость</option>
                        <option value="comment">Комментарий</option>
                        <option value="commentsRoot">Корень комментариев</option>
                        <option value="code">Код</option>
                        <option value="codeRoot">Корень для кода</option>
                        <option value="sliderToggle">Слайдер</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label" for="content-name">Введите название</label>
                <div class="controls">
                    <input id="content-name">
                </div>
            </div>
            <div class="control-group">
                <label class="control-label"...

CSS

.modal {
position: fixed;
top: 50%;
left: 50%;
z-index: 1050;
width: 560px;
margin: -250px 0 0 -280px;
overflow: auto;
background-color: #ffffff;
border: 1px solid #999;
border: 1px solid rgba(0, 0, 0, 0.3);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box;
    
}
.modal.fade {
top: -25%;
-webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
-moz-transition: opacity 0.3s linear, top 0.3s ease-out;
-ms-transition: opacity 0.3s linear, top 0.3s ease-out;
-o-transition: opacity 0.3s linear, top 0.3s ease-out;
transition: opacity 0.3s linear, top 0.3s ease-out;
}

JavaScript

$("button").click(function(){
    $("#modal").modal("show")
})