CSS — Библиотека кода

IOS box-shadow css input

IOS убрать box-shadow с input

webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

webkit-appearance: none;

-moz-appearance: none;

appearance: none;

Preloader css

Добавить preloader/прелоудер

.preloader {
    display: block;
    position: absolute;
    top: 0px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000000;
    background: #988989ab url(/assets/template/img/tail-spin.svg) center center no-repeat;
    background-size: 42px;
}

.preloader {

display: block;

position: absolute;

top: 0px;

left: 0;

width: 100%;

height: 100%;

z-index: 10000000;

background: #988989ab url(/assets/template/img/tail-spin.svg) center center no-repeat;

background-size: 42px;

}

Родителю дать

position: relative;

1	position: relative;

скролл на мобильных устройствах iphone/ios

Скролл на мобильных устройствах iphone/ios Scrolling on mobile devices iphone / ios Добавить к body css свойство

-webkit-overflow-scrolling: touch;

1	-webkit-overflow-scrolling: touch;

Скролл для iphone/ios input

Добавить в body

-webkit-overflow-scrolling: touch;

1	-webkit-overflow-scrolling: touch;

js Скролл модального окна

$('#t_popup').scroll(function(){
    pop_img_cont = $('#popup_static').height();
    fix = $('.popup_fixed');
    elem = Math.abs($(".c-popup").offset().top) + 590;

    top1 = pop_img_cont - 590;

    if (elem >= pop_img_cont){
      console.log('trigger');
      fix.css({position : "relative", top : top1});
    } else {
      fix.css({position : "fixed", top : "unset"});
      console.log('wait');
    }
  });

$('#t_popup').scroll(function(){

pop_img_cont = $('#popup_static').height();

fix = $('.popup_fixed');

elem = Math.abs($(".c-popup").offset().top) + 590;

top1 = pop_img_cont - 590;

if (elem >= pop_img_cont){

console.log('trigger');

fix.css({position : "relative", top : top1});

} else {

fix.css({position : "fixed", top : "unset"});

console.log('wait');

}

});

scroll modal window скроль модального окна

Модальное окно

.modal-window {
    position: fixed;
    z-index: 10000;
    width: 100%;
    top: 0;
    left: 0;
    display: none; 
    height: 100%;
    background: rgba(255, 255, 255, 0.50);
}

.modal-windows-form {
    width: 390px;
    height: 360px;
    background-color: white;
    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    padding: 0px 80px;
    box-sizing: border-box;
}

.modal-windows-form h2 {
    width: 100%;
    text-align: center;
    margin: 20px 0px;
    font-size: 22px;
}

.modal-windows-form input[type="text"] {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    background: #e6e7e8;
    color: black;
    padding: 5px 10px;
    font-size: 14px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.modal-windows-form span {
    font-size: 14px;
    text-align: justify;
    margin-left: 10px;
}

.modal-windows-form textarea {
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border: none;
    background: #e6e7e8;
    color: black;
    resize: none;
    height: 90px;
    padding: 5px 10px;
    font-size: 14px;
    margin-bottom: 10px;
    border-radius: 5px;
}

.modal-windows-form input[type="submit"] {
    border: none;
    background: #f9690e;
    color: white;
    width: 160px;
    margin: auto;
    display: block;
    height: 35px;
    margin-top: 20px;
    font-size: 16px;
    cursor: pointer;
    transition: 0.3s;
    border-radius: 5px;
}

.modal-windows-form input[type="submit"]:hover {
    background: #4ecdc4;
}

.modal-windows-form input[type="checkbox"] {
    display: inline-block;
}

button#form-close {
    border: none;
    outline: none;
    background: transparent;
    display: block;
    width: 10px;
    height: 10px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    position: absolute;
    right: 10px;
    top: 10px;
    background-size: 10px;
    background-image: url(../img/cross.svg);
}

100

101

102

103

104

105

106

.modal-window {

position: fixed;

z-index: 10000;

width: 100%;

top: 0;

left: 0;

display: none;

height: 100%;

background: rgba(255, 255, 255, 0.50);

}

.modal-windows-form {

width: 390px;

height: 360px;

background-color: white;

box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

padding: 0px 80px;

box-sizing: border-box;

}

.modal-windows-form h2 {

width: 100%;

text-align: center;

margin: 20px 0px;

font-size: 22px;

}

.modal-windows-form input[type="text"] {

width: 100%;

-webkit-box-sizing: border-box;

box-sizing: border-box;

border: none;

background: #e6e7e8;

color: black;

padding: 5px 10px;

font-size: 14px;

margin-bottom: 10px;

border-radius: 5px;

}

.modal-windows-form span {

font-size: 14px;

text-align: justify;

margin-left: 10px;

}

.modal-windows-form textarea {

width: 100%;

-webkit-box-sizing: border-box;

box-sizing: border-box;

border: none;

background: #e6e7e8;

color: black;

resize: none;

height: 90px;

padding: 5px 10px;

font-size: 14px;

margin-bottom: 10px;

border-radius: 5px;

}

.modal-windows-form input[type="submit"] {

border: none;

background: #f9690e;

color: white;

width: 160px;

margin: auto;

display: block;

height: 35px;

margin-top: 20px;

font-size: 16px;

cursor: pointer;

transition: 0.3s;

border-radius: 5px;

}

.modal-windows-form input[type="submit"]:hover {

background: #4ecdc4;

}

.modal-windows-form input[type="checkbox"] {

display: inline-block;

}

button#form-close {

border: none;

outline: none;

background: transparent;

display: block;

width: 10px;

height: 10px;

padding: 0;

margin: 0;

cursor: pointer;

position: absolute;

right: 10px;

top: 10px;

background-size: 10px;

background-image: url(../img/cross.svg);

}

<div class="modal-window">
	<div class="modal-windows-form">
		<button id="form-close"></button> 
		<h2>Оставить заявку</h2> 
		<form>
			<input type="text" name="username" value="" placeholder="Имя"> 
			<input type="text" name="phone" value="" placeholder="Телефон"> 
			<textarea placeholder="Сообщение"></textarea>
			<input type="checkbox" name="personalInfo">
			<span>Я подтверждаю согласие на обработку <a href="#" rel="nofollow" class="super_url">персональных данных</a> </span>
			<input type="submit" name="submit" value="Отправить">
		</form>
	</div>
</div>

<h2>Оставить заявку</h2>

<form>

<span>Я подтверждаю согласие на обработку <a href="#" rel="nofollow" class="super_url">персональных данных</a> </span>

</form>

</div>

  $(document).on('click', '.send-letter', function(){
    $('.modal-window').show();
  });

  $(document).on('click', '#form-close', function(){
    $('.modal-window').hide();
  });

$(document).on('click', '.send-letter', function(){

$('.modal-window').show();

});

$(document).on('click', '#form-close', function(){

$('.modal-window').hide();

});

Убрать стрелки input number

input[type='number'] {
    -moz-appearance:textfield;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

input[type='number'] {

-moz-appearance:textfield;

}

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

-webkit-appearance: none;

}