Bootstrap Modals Bootstrap template, demonstrating popup Modals

<div class="container">
    <div class="row">
        <h2>Windows 8 Bootstrap Modal dialogs</h2>
    </div>
    <div class="row text-center" style="padding: 50px;">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modalDialogA">Windows 8 modal - Click to View</button>

        <div class="modal fade modalDialogA " tabindex="-1" role="dialogA" aria-labelledby="modalLabelA">
            <div class="modal-dialog_a modal-lg">
                <div class="modal-content_a">
                    <div class="modal-body_a  ">
                        <h2>This is a Modal Message!</h2>
                        <h4>Some message text shown to users.</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row text-center" style="padding: 50px;">
        <button type="button" class="btn btn-primary" data-toggle="modal" data-target=".modalDialogb">Windows 8 modal - Click to View</button>
        <div class="modal fade modalDialogb" tabindex="-1" role="dialogb" aria-labelledby="modalLabelb">
            <div class="modal-dialog_a modal-lg">
                <div class="modal-content_b">
                    <div class="modal-body_b  ">
                        <h2>This is a Modal Message!</h2>
                        <h4>Some message text shown to users.</h4>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<style>
    .modal {
        padding-right: 0px;
        background-color: rgba(4, 4, 4, 0.3);
    }

    .modal-dialog_a {
        top: 20%;
        width: 100%;
        position: absolute;
    }

    .modal-content_a {
        border-radius: 10px;
        border: none;
        padding: 25px;
        top: 40%;
    }

    .modal-body_a {
        background-color: #0f8845;
        border-radius: 10px;
        color: white;
        padding: 10px;
    }


    .modal-dialog_b {
        top: 20%;
        width: 100%;
        position: absolute;
    }

    .modal-content_b {
        border-radius: 10px;
        border: none;
        padding: 25px;
        top: 40%;
    }

    .modal-body_b {
        background-color: #990000;
        border-radius: 10px;
        color: white;
        padding: 10px;
    }

    .btn {
        padding: 14px 24px;
        border: 0 none;
        font-weight: 500;
    }

        .btn:focus, .btn:active:focus, .btn.active:focus {
            outline: 0 none;
        }

    .btn-primary {
        background: #336633;
        color: #ffffff;
    }

    .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open > .dropdown-toggle.btn-primary {
        background: #339933;
        color: #ffffff;
    }

    .btn-primary:active, .btn-primary.active {
        background: #336633;
        box-shadow: none;
    }
</style>