Modal ablak

Modal ablak megnyitása

html
<!-- MODAL NYITÓ GOMB -->
<p>
    <button type="button" class="btn btn-blue btn-lg" data-toggle="modal" data-target="#myModal"> modal megnyitása </button>
</p>
<!-- MODAL NYITÓ LINK -->
<p>
    <a href="#myModal" title="Modal ablak megnyitása" data-toggle="modal">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>
                <h4 class="modal-title" id="myModalLabel">Modal címe</h4>
            </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;
}