PopUp

 html code
     	    <form id="text-popup" class="mfp-hide" action="http://cc.salesup-crm.com/PostOrder.aspx"  method="post">
            <div class="cart">
                <div class="header">
                    <h1 class="content-left">Оформление заказа</h1>
                    <a  class="content-right close mfp-close"></a>
                    <div class="clear"></div>
                </div>
                <div class="left-wrap">
                    <div class="left-b content-left">
                        <p>
                            <span>Имя</span>
                            <input class="" name="name" id="client" type="text" value="" placeholder="Ваше имя и фамилия" required/>
                        </p>
                        <p>
                            <span>Телефон <font title="Это поле обязательно для заполнения">*</font></span>
                            <input class="input-phone" name="phone" id="phone" type="text" value="" placeholder="Ваш номер" required/>
                        </p>
                                                <hr noshade="noshade">
                        <button id="btn_done" type="submit" class="submit">Оформить заказ</button>
                        <a class="del-link content-right" href="javascript: cartClear();">Очистить</a>
                    </div>
                </div>
           	        <input name="comment" type="hidden" value="" />
            <input name="product_id" type="hidden" value="1579" />
            <input name="result_url" type="hidden" value="http://top-shopper.ru/camping-lights1/index2.html"/>
            <input name="referrer" type="hidden" value="" />
            <input name="order_url" type="hidden" value="" />
            <input name="transaction_id" type="hidden" value="0" />
            <input name="partner_id" type="hidden" value="0" />
            <input name="link_id" type="hidden" value="0" />
            </div>
	    </form>
Стилизация формы поп-апа
@import url('http://fonts.googleapis.com/css?family=PT+Sans:400,700&subset=latin,cyrillic');
a{
    cursor:pointer !important
}
.cart * {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    z-index: 99999;
}
.content-left{
    float:left;
}
.content-right{
    float:right;
}
.clear{
    clear:both;
}

.cart{
    box-sizing: border-box;
    width:100%;
    max-width: 449px;
    min-height: 312px;
    margin: 35px auto;
    border-radius: 2px;
    line-height: 1;
    color: #333;
    background-color: white;
    font-family: 'PT Sans',sans-serif;
    font-size: 14px;
    position: relative;
    z-index: 1000;
}
.cart .header{
    width: 100%;
    height: 69px;
    margin-bottom: 20px;
    background: url(data:image/gif;base64,R0lGODlhAQBFAPcAAPPz8/r6+vDw8Ozs7Pf39/Ly8vT09MspNO3t7erq6u7u7+bm5+/v8O/v7/Hx8e7u7vj4+PX19fv7++vr6+jo6Pz8/Pn5+enp6fb29ubm5v39/efn5/7+/v///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAAAQBFAEcISwA7aAhAAACDARcycKhgIYKDBwk2HOiwUIIFCBgMFBCgAMGECxQ2ZKDIQYOGChIkBLhIAAOGCAYAFHAgoMEDBAMmTEgAMuSCDAcCAgA7) repeat-x;
}
.cart h1{
    color: #303030;
    font-size: 22px;
    text-transform: uppercase;
    margin-bottom: 10px;
    margin: 24px 0 0 22px;
    display: inline-block;
    font-weight: normal;
    display: inline-block;
}
.cart .header .close{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAA7klEQVR42p2T0RGEIAxEacEy7jtXgrXQgi3YAi3YylmLLSDeOE4Im0T42A+GfQssEH6fb2CaxBhp5mMJ70XJgGNR5h4JZ2kAcOVBMAqJYP7S6hmSMXcUUXixigrLEt+GPDAK8EIqeCRgk/6RIyQtoKfE5iFZV7VYIeEuxStMWyBqO2jatp6yNCDY/UzcQF3fmYi4JjFGmvlYwntRMuBYlLlHwlkaAFx5EIxCIpi/tHqGZMwd5GzR0h+WJb4NeWAU4IVU8EjAJv0jR0haQE+JzUOyrmqxQsJdileYtkDUdtC0bT1laUCw+5m4gXq+8wlQBsLHurM2ggAAAABJRU5ErkJggg==) no-repeat left top;
    height: 16px;
    width: 16px;
    text-indent: -9999px;
    margin: 27px 27px 0 0;
}
.cart .header .close:hover{
    background-position:left bottom;
}
.cart .left {
    margin: 0 auto;

}
.cart .left .left-b{
    background-color: #fbfbfb;
    padding: 17px 16px 14px 20px;
    border: 1px solid #f4f4f4;
    border-radius: 4px;
    min-height: 208px;
    display: inline-block;
    width: 100%;
}
.cart .left .left-b p{
    margin-bottom: 13px;
}
.cart .left .left-b p span{
    width: 107px;
    line-height: 38px;
    float: left;
}
.cart .left .left-b p input{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAAAqCAYAAABGDmUMAAABp0lEQVR42u3dMWoiYRjH4TlDjrHnsc0lAgt7i1gmldhaeAALewsbi1SKFgGLQWuR4LvfayZkMgnJNlvN88AfnCk/+H5MZxUR1dvqur4pG5QNy5ZlYWa927JpwKBpQrbh2oh2LH6XPTssM2vtuWnDezDKw4ODMbNv9nANRvlx6zDM7B92m8F4bL/c7XYxm81iMpnEaDSK8XhsZj1Z3vm8+9mAbEEnGI8ZjKf2y+l0GvP5PFarVazX69hut2bWk+Wdz7ufDcgWdILxVHU/OxaLRRwOhzidTnG5XALoj7zzefezAdmCbh8+BWOz2QgFCMe1BT8GIz9LALIFggEIBiAYgGAAggEIBiAYggEIBiAYgGAAggEIBiAYggEIBiAYgGAAggEIBiAYTgoQDEAwAMEABAMQDEAwAMEQDEAwgP8cjGU3GP6MGfotG/BFMJYZjGH75X6/j+PxGOfz2alBD+XdzwZkCzrBGGYwBt3PDjOzLzaoSlAyGvcOw8y+2X224hqMJhp/yl4cjJm19tK0ofoQjCYav8ruyqb1Kwdm1r/VTQPumiZUb8H4C7IfRaoW7Wh+AAAAAElFTkSuQmCC) no-repeat;
    height: 42px;
    width: 279px;
    padding-left: 15px;
    border: none;
    /* width: 80%; */
}

.cart .left .left-b div.select-wrapper{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQYAAAAkCAYAAABrJpS1AAABx0lEQVR42u3dO2rjYBSGYeEFDHgRSTPpU9gJ02RrWoPTZAkDNm7DlPYKgnGjGBe+3++3OdGXaA4MwRBDKuk1PEYITvPD/6ILxkEYhrl6vX7dbDYfoyh6abfbBiBbtPfVALVATQjir3yr1XqdzWa23W7tdDoByBjtfTVALVATFIab3W7H4gAwtUBNUBjujsejAYCoCQrDr8PhYAAgasJ7GPb7vQGAEAYA58OgBw4AkDx8/AiDXlUAgHgYNpuNAYB4GNbrtQGAeBhWq5UBgHgYlsulAYB4GBaLhQGAeBjm87kBgHgY9KsqAOlQLBYtCIL/6NxX5z0M0+nUAKRDtVr9FAad++q8h2EymRiA9CgUCh4FHV8y62EYj8cGID0qlYqHQceXzHoYRqORAUgXXSnIpXMehuFwaADSpVwuv7t0zsMwGAwMAMTD0O/3DQCEMAA4H4Zer2cAIB6GbrdrACCEAcD5MHQ6HQMAIQwACAMAwgCAMAD4zjDcNRqNGQsCQC3496e2P0ul0lOtVltEUfSXxQGyR3tfDVAL1ASFIR97CD8+v2PPsT8AMuM52fth0oK8wpCL/YhdxW5j97rHAJAZ98nev0pakHsDleTd0l7zrNoAAAAASUVORK5CYII=) no-repeat;
    width: 263px;
    height: 36px;
    overflow: hidden;
    display: block;
}
.cart .left .left-b span font{
    color: #FF0000;
}
.cart .left .left-b textarea{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAQwAAABICAYAAAADMstdAAAB8UlEQVR42u3WMWoiYRjH4TnDHmPPY5tLBBb2FrFMKrG18AAW9hY2FqkULQIWg9YiYd79XjMhs7Mhm36eB/6QWL7w/ZgqIqr31XX9o2xUNi5bl4WZDW7rtgGjtgnZhlsjurH4VfbiWGbW2Uvbho9glH8eHcbMvtjjLRjljzvHMLNv7C6D8dT98XA4xGKxiNlsFpPJJKbTqZkNZPnm8+1nA7IFvWA8ZTCeuz/O5/NYLpex2Wxiu93Gfr83s4Es33y+/WxAtqAXjOeq/9mxWq3idDrF5XKJpmkCGI588/n2swHZgn4f/gnGbrcTChCOWwv+G4z8LAHIFggGIBiAYACCAQgGIBiAYAgGIBiAYACCAQgGIBiAYAgGIBiAYACCAQgGIBiAYLgUIBiAYACCAQgGIBiAYACCIRiAYACCAQgGIBiAYACCIRiAYACCAQgGIBiAYACCIRiAYACCAQgGIBiAYACCAQiGYACCAQgGIBiAYACCAQiGYACCAQgGIBiAYACCAQiGYADfCMa6H4ymaVwLBiwb8Ekw1hmMcffH4/EY5/M5rterq8EA5dvPBmQLesEYZzBG/c8OM7NPNqpKUDIaD45hZl/sIVtxC0Ybjd9lrw5jZp29tm2o/gpGG42fZfdl8/qNg5kNb3XbgPu2CdV7MP4A4VwgnS0zYhwAAAAASUVORK5CYII=) no-repeat;
    margin: 0px;
    padding: 12px 15px;
    border: none;
    resize:none;
    width: 268px;
    height: 71px;
    box-sizing: border-box;
}
.cart .left .left-b hr{
    color: #e1e1e1; /*??? IE */
    background-color:#e1e1e1; /*??? Firefox, Opera, Safari*/
    border:0px none;
    height:1px; /* ?????? 1px IE, Firefox, Opera, Safari */
}
.cart .left .left-b a.del-link{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAYCAYAAAAs7gcTAAAAiElEQVR42p2R0Q3AIAhEXcEx+k1ncidnqrO4AqWNJqhHgpq8RMDDU8Jz3aER1X7mr/UgC8UQkFCFpAMGgqEGk02w5ILVBd1m+WNk6/iw24b7gdtf5x6Kf9xE1IlqP/PXepCFYgi+VYWkAwaCoQaTTbDkgtUF3Wb5Y2Tr+LDbhvuB21/nHop73C9b8Epk+xL6KwAAAABJRU5ErkJggg==) no-repeat left top;
    height: 12px;
    color: #303030;
    font-size: 13px;
    text-decoration: none;
    padding-left: 20px;
    margin-top: 30px;
    margin-right: 10px;
}
.cart .left .left-b a.del-link:hover{
    background-position: left bottom;
}
.cart .left .left-b button{
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKEAAABUCAYAAADqDlccAAACY0lEQVR42u3dsU5TYRjHYSK7YeMOgFML0dPTRBBoKS4mDk6OXhA3YMKEiaNGJUEXiJqImLjp5qCDWhLcGAgRAb9XWxp2eg7DM/xu4J8nOTnL947U6/WR1JWHtRtTb7LGxk5W7H3MilNpGIWvcBbewl346wOc+5AV+0ZSWYW31Vq+kPyNBsKxl1lj2zAqu1dZYyf8BcLJ91lxaBRV8Gn+nfxNBcJZg6iqwl8gbBlDFSJsBcK2MVQhwjaEglAQQigIBSGEglAQQigIBSGEglAQQigIBSGEglAQQigIBSGEglAQQigIBSGEglAQQigIBSGEglAQQigIBSGEuhQIW++y4sggKrvtrPjTfxpu9nEt7xpFZZfc7fYfyZy8f21m7W3WODaMyiq8JXeP+s8Fj6Xu3a5Pr6/W8oOtrHFiJA2r8BXOwlu46z+cPpoaT91NraSepTZTr6ULbrPna6Xnbbx/QmKkd9TkamoidTO1GH8t0gW32PM10fN2dkznH8Kn+fzU12Jpo9vs7P1qLp9Kwyh8hbPwdu6i05P81txuc3nfSCqr8PY8nx9cdPpUtLcNo7L7XLQHF51+NjuHRlEFn+bBRSeDqKrOLjoZQxUi/H/RyRiqEGEbQkEoCCEUhIIQQkEoCCEUhIIQQkEoCCEUhIIQQkEoCCEUhIIQQkEoCCEUhIIQQkEoCCEUhIIQQkEoCCEUhIIQQl0KhK3vzc6RQVR2P5qdwUWnrcZC1ygqu83GwuCi04OZfO1b0Tk2jMoqvCV35y863Zm+vv4inz/4UiydGEnDKnyFs/DmopNcdJKLTv1jOn8BtoaGbNJ/PNEAAAAASUVORK5CYII=) no-repeat left top;
    color: #fff;
    font-size: 16px;
    height: 42px;
    width: 161px;
    padding-left: 0;
    cursor: pointer;
    margin-top: 15px;
}
.cart .left .left-b button:hover{
    background-position: left bottom;
}

/*FIREFOX CSS HACK*/
@-moz-document url-prefix() {
    .cart, .cart .left .left-block textarea, .cart .right-block ul.cart-ul li .info .arrow-block{
        -moz-box-sizing: border-box;
    }
}
/*EOF FIREFOX CSS HACK*/

/*JS формы очистки и проверки полей*/
      <script type="text/javascript">
            function cartClose() {
                window.top.postMessage('close-iframe', '*');
            }
            function cartTelCheck(id, show_errors)
            {
                var div = document.getElementById(id) || null;
                if (div == null)
                    return true;
                var phone = (div.value || '').replace(/[^0-9]+/, '');

                var phoneLen = phone.length || 0;
                if (phoneLen < 5 || typeof phone != 'string') {
                    if (show_errors == true) {
                        alert("Укажите корректный номер телефона.");
                    }
                    return false;
                }

                return true;
            }
            function cartClear() {
                if (window.confirm("Действительно очистить?")) {
                    document.getElementById('phone').value = '';
                    document.getElementById('client').value = '';
                }
            }
            function cartTime() {
                return (new Date().getTime()) || 0;
            }

            function pastedData() {
                var land_forms = document.getElementsByTagName('form');
                for (var k = 0; k < land_forms.length; k++) {
                    land_forms[k].action = land_forms[k].action + '&copypaste=1';
                }
            }

        </script>