Проблема явно в css, т.к. когда подключаю файл style.css input выводится криво, когда отключаю все ок. Нюанс в том, что в этом input ввод производится по маске jquery
style.css
| Код |
body{
margin: 0px;
padding: 0px;
text-align: center;
/*background: url("../img/background.jpg") no-repeat;*/
/*background-attachment: fixed;
background-size: cover;*/
/*-moz-background-size: cover;*/ /* Firefox 3.6+ */
/*-webkit-background-size: cover;*/ /* Safari 3.1+ и Chrome 4.0+ */
/*-o-background-size: cover;*/
}
#container{
width: 60%;
text-align: justify;
line-height: 1.2;
font-family: Arial, Tahoma, Verdana;
font-size: 16px;
height: auto;
position: absolute;
left: 20%;
}
#left{
width: 18%;
text-align: left;
position: absolute;
left: 1%;
}
#right{
width: 18%;
position: absolute;
left: 81%;
text-align: left;
}
.zayavka{
padding: 120px 50px;
background: url("zayavka/zayavka.png") no-repeat;
}
.zayavka:hover{
padding: 120px 50px;
background-image: url("zayavka/zayavka_hover.png") no-repeat;
}
#logo{
float: left;
padding: 15px 0 20px 15px;
}
#place{
padding: 10px 20px 20px 65px;
text-align: center;
float: left;
margin: 0 auto;
font-weight: bold;
font-size: 25px;
color: red;/*#ff4500;*/
}
#phone{
padding: 15px 20px 20px 0;
margin: 0 auto;
width: auto;
float: right;
font-weight: bold;
font-style: italic;
font-size: 20px;
}
#content{
background-color: white;
padding: 15px;
float: left;
box-shadow: 0 5px 25px rgba(0,0,0,0.6);
-moz-box-shadow: 0 5px 25px rgba(0,0,0,0.6);
-webkit-box-shadow: 0 5px 25px rgba(0,0,0,0.6);
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
}
#content ul{
list-style-type: square;
}
#content a{
text-decoration: none;
color: #1a74a3;
}
#content a:hover{
text-decoration: underline;
color: #1a74a3;
}
#content table{
border-collapse: collapse;
border: 1px solid black;
margin: 20px 20px 20px 20px;
}
#content td{
font-size: 14px;
font-family: Arial;
padding-left: 20px;
padding-right: 20px;
text-align: center;
line-height: 1.5;
}
#content img{
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
}
#ok{
list-style-image: url("../img/ul_ok.jpg");
}
#clear{
clear: both;
}
#navigation{
padding-bottom: 10px;
padding-left: 25px;
}
#footer{
margin: 0 auto;
padding: 15px;
color: black;
font-weight: bold;
font-family: Arial, Tahoma, Verdana;
font-size: 16px;
}
hr{
border: none;
background-color: black;
color: black;
height: 3px;
}
|
zayavka.css
| Код |
.modal-window {
background: rgba(0, 0, 0, 0.5);
display: none;
height: 100%;
width: 100%;
left: 0;
top: 0;
position: fixed;
overflow-y: hidden;
z-index: 9999;
}
.window-container {
background: #ffffff;
display: block;
margin: 5% auto;
padding: 20px;
width: 500px;
z-index: 9999;
opacity: 0;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-ms-transition: 0.4s;
-o-transition: 0.4s;
transition: 0.4s;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
text-align: left;
font-size: 14px;
font-weight: bold;
font-family: Arial Tahoma Verdana;
}
.animation {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
}
.visible {
opacity: 1;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
label{
font-weight: bold;
float: left;
font-size: 12px;
padding-top: 5px;
}
input{
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
width: 100%;
padding: 5px;
text-align: left;
float: left;
}
textarea{
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
width: 100%;
height: 300px;
padding-left: 5px;
padding-top: 3px;
text-align: left;
}
button{
float: right;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
border: 1px solid white;
background-color: white;
font-weight: bold;
color: black;
}
button:hover{
float: right;
cursor: pointer;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-khtml-border-radius: 10px 10px 10px 10px;
border: 1px solid white;
background-color: white;
font-weight: bold;
color: red;
}
|
Вывод модального окна
| Код |
<div id="modal-window" class="modal-window">
<div class="window-container animation">
<h2 style="color: red;" title="Оставьте заявку на устранение засора или выполнение других видов работ">Заявка</h2>
<form action="" method="post" name="zayavka">
<label for="fio" id="lfio">Ваше имя:</label>
<br />
<input name="fio" id="fio" type="text" value=""/>
<br />
<label for="phone" id="lphone">Контактный телефон:</label>
<br />
<input name="phone" id="phone" type="text" value=""/>
<br />
<label for="mail" id="lmail">Email:</label>
<br />
<input name="mail" id="mail" type="text" value=""/>
<br />
<label for="message" id="lmessage">Сообщение:</label>
<br />
<textarea name="message"></textarea>
<br />
<button type="submit" name="zayavka" onclick="return checkNull();">Отправить</button>
<br />
</form>
</div>
</div>
|
Ввод телефона по маске jquery
| Код |
$(document).ready(function(){
$("#phone").inputmask("+7(999)999-99-99");
});
|
Искажается поле Контактный телефон |