JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://giftplace.su/images/to_busket.png"></script>
<script src="http://giftplace.su/images/new/popup_box.png"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator" content="HTML Tidy for Linux (vers 6 November 2007), see www.w3.org" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Фиксированный подвал</title>
</script>
</script>
<script type="text/javascript">
//<![CDATA[
                $().ready(function() {
                        $('#dialog').jqm();
                });
//]]>
</script>
<link rel="stylesheet" type="text/css" href="jqModal.css" />
</head>
<body>
<a href="#" class="jqModal">view</a>
<div class="jqmWindow" id="dialog">
<div class="name_line">Где живет этот человек</div>
<div class="selectWrapper"><span>Страна</span><select name="idCountry" id="idCountry">
<option value="NULL">Неизвестно</option>
</select></div>
<div class="selectWrapper"><span>Город</span><select name="idCity" id="idCity">
<option value="NULL">Неизвестно</option>
</select></div>
<div class="nextWrapper"><a href="#z" class="jqmClose"><img src="http://giftplace.su/images/new/next.png" alt="" /></a></div>
<div class="linkWrapper"><a href="#z" class="jqmClose">Я не знаю где живет этот человек</a></div>
</div>
</body>
</html>

CSS

/* jqModal base Styling courtesy of;
    Brice Burgess <[email protected]> */

/* The Window's CSS z-index value is respected (takes priority). If none is supplied,
    the Window's z-index value will be set to 3000 by default (via jqModal.js). */
    
.jqmWindow {
    display: none;
    
    position: fixed;
    top: 17%;
    left: 50%;
    
    margin-left: -217px;
    width: 434px;
    
    background-color: transparent;
    background: url('http://giftplace.su/images/new/popup_box.png') no-repeat;
    border: 0;
    padding: 12px;
    height:252px;
}
.name_line {
    color: #ff9900;
    font-size:14px;
    font-size: 19px;
    text-align: center;
    height: 35px;
}
div.selectWrapper select {
    -moz-appearance: none;
    background: none repeat scroll 0 0 transparent;
    border: 0 none;
    color: #999999;
    float: right;
    height: 27px;
    left: 20px;
    padding-left: 10px;
    position: relative;
    width:240px;
}

div.selectWrapper span {
    padding-left: 50px;
    line-height: 25px;
}


div.nextWrapper {
    margin-top: 20px;
}

div.nextWrapper, div.linkWrapper {
    text-align: center;
    height: 70px;
}
div.linkWrapper a{
color: #990000;
}

.selectWrapper {
    width: 350px;
    height: 27px;
    overflow: hidden;
    background: url('http://giftplace.su/images/new/select.png') no-repeat right white;
    margin-bottom: 5px;
    -moz-border-radius: 10px;
    -opera-border-radius: 10px;
    -khtml-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}
.jqmOverlay { background-color: #000; }

/* Background iframe styling for IE6. Prevents ActiveX bleed-through (<select> form elements, etc.) */
* iframe.jqm {position:absolute;top:0;left:0;z-index:-1;
    width: expression(this.parentNode.offsetWidth+'px');
    height: expression(this.parentNode.offsetHeight+'px');
}

/* Fixed posistioning emulation for IE6
     Star selector used to hide definition from browsers other than IE6
     For valid CSS, use a conditional include...

JavaScript

/*
 * jqModal - Minimalist Modaling with jQuery
 *   (http://dev.iceburg.net/jquery/jqModal/)
 *
 * Copyright (c) 2007,2008 Brice Burgess <[email protected]>
 * Dual licensed under the MIT and GPL licenses:
 *   http://www.opensource.org/licenses/mit-license.php
 *   http://www.gnu.org/licenses/gpl.html
 * 
 * $Version: 03/01/2009 +r14
 */
(function($) {
$.fn.jqm=function(o){
var p={
overlay: 50,
overlayClass: 'jqmOverlay',
closeClass: 'jqmClose',
trigger: '.jqModal',
ajax: F,
ajaxText: '',
target: F,
modal: F,
toTop: F,
onShow: F,
onHide: F,
onLoad: F
};
return this.each(function(){if(this._jqm)return H[this._jqm].c=$.extend({},H[this._jqm].c,o);s++;this._jqm=s;
H[s]={c:$.extend(p,$.jqm.params,o),a:F,w:$(this).addClass('jqmID'+s),s:s};
if(p.trigger)$(this).jqmAddTrigger(p.trigger);
});};

$.fn.jqmAddClose=function(e){return hs(this,e,'jqmHide');};
$.fn.jqmAddTrigger=function(e){return hs(this,e,'jqmShow');};
$.fn.jqmShow=function(t){return this.each(function(){t=t||window.event;$.jqm.open(this._jqm,t);});};
$.fn.jqmHide=function(t){return this.each(function(){t=t||window.event;$.jqm.close(this._jqm,t)});};

$.jqm = {
hash:{},
open:function(s,t){var h=H[s],c=h.c,cc='.'+c.closeClass,z=(parseInt(h.w.css('z-index'))),z=(z>0)?z:3000,o=$('<div></div>').css({height:'100%',width:'100%',position:'fixed',left:0,top:0,'z-index':z-1,opacity:c.overlay/100});if(h.a)return F;h.t=t;h.a=true;h.w.css('z-index',z);
 if(c.modal) {if(!A[0])L('bind');A.push(s);}
 else if(c.overlay > 0)h.w.jqmAddClose(o);
 else o=F;

 h.o=(o)?o.addClass(c.overlayClass).prependTo('body'):F;
 if(ie6){$('html,body').css({height:'100%',width:'100%'});if(o){o=o.css({position:'absolute'})[0];for(var y in {Top:1,Left:1})o.style.setExpression(y.toLowerCase(),"(_=(document.documentElement.scroll"+y+" || document.body.scroll"+y+"))+'px'");}}

 if(c.ajax) {var r=c.target||h.w,u=c.ajax,r=(typeof r == 'string')?$(r,h.w):$(r),u=(u.substr(0,1) == '@')?$(t).attr(u.substring(1)):u;
 ...