Блок закрывает всплывающее окно

Здравствуйте. Подключал оплату на сайт человеку, он попросил заодно сделать форму всплывающую. Я в html, css не особо, поэтому набросал вариантик, но возникла проблема - часть формы закрывают другие блоки. Не могли бы вы помочь мне с решением этой проблемы? P.S. z-index у других блоков не выставлен, вот только в форме. P.S.S. Если форму в другое место переместить нормально отображается. Возможно дело в заголовке или кнопке?

Сам код формы:

                <div id="openModal" class="modalDialog">
                    <div>
                        <a href="#close" title="Закрыть" class="close">X</a>
                        <p style = "font-weight: bold; font-size: 28px; font-weight: bold; padding-bottom: 14px;"><b>Заявка</b></p>
                        <div class = "input-field">
                        <p><b>Фото</b></p>
                        <p class = "gg">на Вашу страницу</p></div>
                        <div class = "input-field"><input type = "text" placeholder = "Имя"></div>
                        <div class = "input-field"><input type = "text" placeholder = "E-Mail"></div>
                        <div class = "input-field"><input type = "text" placeholder = "Ссылка на запись"></div>
                        <div style = "padding-top: 45px;"><p>К оплате:</p>
                        <b>199p</b></div>
                        <div class="service-order input-field">
                            <a class="button g" href="#">Оплатить →</a>
                            <div class = "clear"></div>
                        </div>
                    </div>
                </div>

CSS:

        .modalDialog {
            position: fixed;
            width: 410px;
            height: 470px;
            background-color: #f5f5f5;
            text-align: center;
            padding: 22px 0;
            font-size: 18px;
            display: inline-block;
            position: relative;
            vertical-align: top;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 99999;
            -webkit-transition: opacity 400ms ease-in;
            -moz-transition: opacity 400ms ease-in;
            transition: opacity 400ms ease-in;
            display: none;
            pointer-events: none;
            float: center;
        }
        .modalDialog:target {
            display: block;
            pointer-events: auto;
        }
        .modalDialog > div {
            width: 400px;
            position: relative;
            border-radius: 10px;
            }
        .close {
            background: #606061;
            color: #FFFFFF;
            line-height: 25px;
            position: absolute;
            right: -12px;
            text-align: center;
            top: -10px;
            width: 24px;
            text-decoration: none;
            font-weight: bold;
            -webkit-border-radius: 12px;
            -moz-border-radius: 12px;
            border-radius: 12px;
            -moz-box-shadow: 1px 1px 3px #000;
            -webkit-box-shadow: 1px 1px 3px #000;
            }
        .clear{
        clear: both;
        }