Modal ablak
html
<!-- MODAL NYITÓ GOMB -->
<p>
<button type="button" class="btn btn-blue btn-lg" data-toggle="modal" data-target="#myModal" aria-haspopup="true" aria-label="modal ablak megnyitása">modal ablak megnyitása </button>
</p>
<!-- MODAL NYITÓ LINK -->
<p>
<a href="#myModal" title="Modal ablak megnyitása" data-toggle="modal" aria-haspopup="true" aria-label="modal ablak megnyitása">Modal ablak megnyitása</a>
</p>
<!-- MODAL -->
<div class="modal fade in" id="myModal" role="dialog" aria-labelledby="myModalLabel" tabindex="-1">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Bezárás"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="myModalLabel">Modal címe</h2>
</div>
<div class="modal-body">
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam id dolor id nibh ultricies vehicula.</p>
</div>
<div class="modal-footer">
<div class="btns">
<div class="btnsCont">
<button class="btn btn-block btn-default btn-md text-uppercase" id="" title="Mégsem" type="button" data-dismiss="modal">mégsem</button>
<button class="btn btn-block btn-blue btn-md text-uppercase" id="" title="Tovább a következő állapothoz">tovább</button>
</div>
</div>
</div>
</div>
</div>
</div>
css
.modal {
text-align: center;
padding: 0!important;
}
.modal:before {
content: '';
display: inline-block;
height: 100%;
vertical-align: middle;
margin-right: -4px;
}
.modal-dialog {
display: inline-block;
text-align: left;
vertical-align: middle;
}
.modal-body span {
word-wrap: break-word;
}
.modal-footer {
border-top: 1px solid #c2cddb;
}
.modal-header {
border-bottom: 1px solid #c2cddb;
}
.modal-title {
text-transform: uppercase;
}
.modal .table-striped td {
padding: 5px 8px;
}
.modal .table-striped td:last-of-type {
width: 50%;
word-wrap: break-word;
word-break: break-all;
white-space: normal;
padding-right: 8px;
}
.modal-header .close {
font-size: 1.6rem;
margin: 0;
}
.modal-content {
border-radius: 0;
}
.modal-footer .btns {
margin-bottom: 0;
}