Добрый вечер! Я пишу сайт для стоматологического кабинета, и у меня случился конфликт между каруселью, связанными выпадающими списками и модальным окном.
Файл stomkab-main.html (скрипт карусели в конце кода):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Студия современной стоматологии |</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<link rel="shortcut icon" href="images/toothdoctor_diente_10728.ico" type="image/x-icon">
<link rel="stylesheet" href="css/reset.css" type="text/css" media="all">
<link rel="stylesheet" href="css/grid.css" type="text/css" media="all">
<link rel="stylesheet" href="css/style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/form-style.css" type="text/css" media="all">
<link rel="stylesheet" href="css/window-style.css" type="text/css" media="all">
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'>
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/roundabout.js" type="text/javascript"></script>
<script src="js/roundabout_shapes.js" type="text/javascript"></script>
<script type="text/javascript" src="selects.js"></script>
<!--[if lt IE 7]><script type="text/javascript" src="http://info.template-help.com/files/ie6_warning/ie6_script_other.js"></script><![endif]-->
<!--[if lt IE 9]><script type="text/javascript" src="js/html5.js"></script><![endif]-->
</head>
<body>
<div class="page-wrapper">
...
<!--Карусель-->
<aside>
<div class="main">
<a href="#" class="btnPrev"><img src="images/button-1.png" alt=""></a><a href="#" class="btnNext"><img src="images/button-2.png" alt=""></a>
<div id="carousel">
<ul id="myRoundabout">
<li><img src="images/1307777.jpg" alt="" /></li>
<li><img src="images/news_file_24_l.jpg" alt="" /></li>
<li><img src="images/stomat-03.jpg" alt="" /></li>
<li><img src="images/Untitled-6.jpg.6d243a94d32c96a062ba4d3e399b24f0.jpg" alt="" /></li>
<li><img src="images/80414_content_Вэладент_улыбайся.jpg" alt="" /></li>
<li><img src="images/5d0eda80b4c8fd12548c50b746e50a5a.jpg" alt="" /></li>
<li><img src="images/akciya-plastinochnyj-protez-2e319f0a7265b99e24824ce68036675e.jpg" alt="" /></li>
</ul>
</div>
</div>
</aside>
...
<!--Форма записи пациента к врачу-->
<div class="container" id="yak1">
<form id="InsertForm" action="#" method="POST" class="checkout">
<div class="checkout-header">
<h1 class="checkout-title">
Записаться на приём
<span class="checkout-price">GO!</span>
</h1>
</div>
<p>
<input type="text" name="surname" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{2,30}" placeholder="Фамилия" title="Введите фамилию на русском языке, от 2 до 30 букв без пробелов" maxlength="30" required>
<input type="text" name="name" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{2,30}" placeholder="Имя" title="Введите имя на русском языке, от 2 до 30 букв без пробелов" maxlength="30" required>
<input type="text" name="patronymic" size="30" class="checkout-input checkout-name" pattern="[А-Яа-яЁё]{7,30}" placeholder="Отчество" title="Введите отчество на русском языке, от 7 до 30 букв без пробелов" maxlength="30" required>
<input type="text" name="nomer_telefona" size="30" class="checkout-input checkout-name" pattern="\+([0-9]{1,3})(\([0-9]{2,5}\))([0-9]{5,7})" placeholder="Номер телефона" title="Введите номер телефона в формате +<код страны>(<код региона/оператора>)<номер телефона> без пробелов. Код страны содержит от 1 до 3 цифр, код региона/оператора - от 2 до 5 цифр, а номер телефона - от 5 ддо 7 цифр" maxlength="30" required>
</p>
<p>
<input type="text" name="pochta" size="80" class="checkout-input checkout-name" pattern="([A-z0-9_.-]{1,})@([A-z0-9_.-]{1,}).([A-z]{2,8})" placeholder="E-mail" title="Введите адрес электронной почты в формате <имя_пользователя>@<Название_сайта>.<домен_государства> без пробелов. Имя пользователя и название сайта содержат не менее 1 символа, а домен государства - от 2 до 8 букв" maxlength="80" required>
<select name="med_spec" id="med_spec" class="checkout-input checkout-name" required>
<option value="0">Выберите область медицины</option>
<option value="1">Терапия</option>
<option value="2">Хирургия</option>
<option value="3">Ортопедия</option>
<option value="4">Ортодонтия</option>
<option value="5">Пародонтология</option>
</select>
<select name="services" id="services" class="checkout-input checkout-name" disabled required>
<option value="0">Выберите услугу</option>
</select>
<select name="doctors" id="doctors" class="checkout-input checkout-name" disabled required>
<option value="0">Выберите врача</option>
</select>
</p>
<p>
<input type="text" name="data_priema" class="checkout-input checkout-name" pattern="[0-9]{4}-[0-9]{2}-[0-9]{2}" placeholder="Дата приёма" title="Введите дату приёма пациента в формате <ГГГГ>-<ММ>-<ДД> без пробелов" maxlength="10" required>
<select name="vremya_priema" class="checkout-input checkout-name" required>
<option>Выберите время приёма</option>
<option value="08:00">8:00</option>
<option value="08:49">8:49</option>
<option value="09:38">9:38</option>
<option value="10:27">10:27</option>
<option value="11:16">11:16</option>
<option value="12:05">12:05</option>
<option value="13:43">13:43</option>
<option value="14:32">14:32</option>
<option value="15:21">15:21</option>
<option value="16:10">16:10</option>
<option value="16:59">16:59</option>
<option value="17:48">17:48</option>
<option value="19:26">19:26</option>
</select>
</p>
<p>
<input type="submit" value="Записаться" class="checkout-btn">
</p>
</form>
</div>
...
</div>
...
<!--Модальное окно-->
<div class="modal-wrapper">
<div class="modal">
<div class="head">
<a class="btn-close trigger" href="#">
<i class="fa fa-times" aria-hidden="true"></i>
</a>
</div>
<div class="content">
<div class="good-job">
<i class="fa fa-thumbs-o-up" aria-hidden="true"></i>
<h1></h1>
</div>
</div>
</div>
</div>
...
<!--Скрипт карусели-->
<script type="text/javascript">
// <![CDATA[
$(document).ready(function() {
$('ul#myRoundabout').roundabout({
shape: 'figure8'
});
var cnn=[]
$('#myRoundabout li').each(function(){
cnn.push(this)
})
var curr=0
$('.btnPrev').live('click',function(){
if(curr<0)
curr=cnn.length-1
else
curr--
$(cnn.slice(curr,curr+1)).trigger('click')
return false
})
$('.btnNext').live('click',function(){
if(curr<cnn.length)
curr++
else
curr=0
$(cnn.slice(curr,curr+1)).trigger('click')
return false
})
});
// ]]>
</script>
</body>
</html>
Файл selects.js
//Связанные выпадающие списки
$(document).ready(function () {
$('#med_spec').change(function () {
var med_spec = $(this).val();
if (med_spec == '0') {
$('#services').html('<option>Выберите услугу</option>');
$('#services').attr('disabled', true);
$('#doctors').html('<option>Выберите врача</option>');
$('#doctors').attr('disabled', true);
return(false);
}
$('#services').attr('disabled', true);
$('#services').html('<option>Загрузка...</option>');
var url = 'get_services.php';
$.post(
url,
"med_spec=" + med_spec,
function (result) {
if (result.type == 'error') {
alert('Ошибка!');
return(false);
}
else {
var options = '';
$(result.services).each(function() {
options += '<option value="' + $(this).attr('service_id') + '">' + $(this).attr('service_name') + '</option>';
});
$('#services').html('<option value="0">Выберите услугу</option>'+options);
$('#services').attr('disabled', false);
$('#doctors').html('<option>Выберите врача</option>');
$('#doctors').attr('disabled', true);
}
},
"json"
);
});
$('#services').change(function () {
var med_spec = $('#med_spec').val();
var services = $(this).val();
if (services == '0') {
$('#doctors').html('<option>Выберите врача</option>');
$('#doctors').attr('disabled', true);
return(false);
}
$('#doctors').attr('disabled', true);
$('#doctors').html('<option>Загрузка...</option>');
var url = 'get_doctor.php';
$.post(
url,
"med_spec=" + med_spec,
function (result) {
if (result.type == 'error') {
alert('Ошибка!');
return(false);
}
else {
var options = '';
$(result.doctors).each(function() {
options += '<option value="' + $(this).attr('doctor_id') + '">' + $(this).attr('doctor_surname') + ', ' + $(this).attr('doctor_name') + '</option>';
});
$('#doctors').html('<option value="0">Выберите врача</option>'+options);
$('#doctors').attr('disabled', false);
}
},
"json"
);
});
//Отправка формы на сервер
$('#InsertForm').submit(function(e) {
e.preventDefault();
$.ajax({
type: $(this).attr('method'),
url: 'insert.php',
data: $(this).serialize(),
success: function(result){
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur-it');
$('div.modal-wrapper > div.modal > div.content > div.good-job > h1').html(result);
return false;
}
});
});
//Открытие и закрытие модального окна
$('.trigger').on('click', function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur-it');
return false;
});
});
CSS-стили для карусели (style.css):
#carousel { height:412px; padding-top:40px; overflow:hidden; background-color:#008000}
/* gallery */
.roundabout-holder { height: 377px; width:915px; margin:0 auto;}
.roundabout-moveable-item { height: 377px; width: 469px; cursor: pointer; }
.roundabout-moveable-item img { width:100%; height:100%; display:block; }
.roundabout-in-focus { cursor: auto; }
.btnPrev{ position:absolute; top:186px; left:182px; z-index:900}
.btnNext{ position:absolute; top:186px; left:806px; z-index:900}
/*footer*/
footer { color:#6b6b6b; font-size:0.75em; background:#fff}
footer .inside{ padding:35px 62px 130px 40px }
footer a {color:#6b6b6b; text-decoration:none}
footer a:hover { text-decoration:underline}
footer span{ color:#6b6b6b}
.indent-2{ position:relative; padding-left:20px; float:left}
.rowElem{ height:51px}
.rowElem1{ height:32px;}
.block-contact span{ float:right; margin-right:80px}
CSS-стили для формы (form-style.css):
.checkout {
width:600px;
margin: 50px auto;
padding: 15px;
background: #f3f6fa;
border: 1px solid;
border-color: #c2cadb #bbc5d6 #b7c0cd;
border-radius: 7px;
-webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.15);
}
.checkout > p {
zoom: 1;
}
.checkout > p:before, .checkout > p:after {
content: '';
display: table;
}
.checkout > p:after {
clear: both;
}
.checkout > p + p {
margin-top: 15px;
}
.checkout-header {
position: relative;
margin: -15px -15px 15px;
}
.checkout-title {
padding: 0 15px;
line-height: 38px;
font-size: 13px;
font-weight: bold;
color: #7f889e;
text-shadow: 0 1px rgba(255, 255, 255, 0.7);
background: #eceff5;
border-bottom: 1px solid #c5ccdb;
border-radius: 7px 7px 0 0;
background-image: -webkit-linear-gradient(top, #f5f8fb, #e9edf3);
background-image: -moz-linear-gradient(top, #f5f8fb, #e9edf3);
background-image: -o-linear-gradient(top, #f5f8fb, #e9edf3);
background-image: linear-gradient(to bottom, #f5f8fb, #e9edf3);
-webkit-box-shadow: inset 0 1px white;
box-shadow: inset 0 1px white;
}
.checkout-title:before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
-webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.checkout-price {
position: absolute;
top: -14px;
right: -14px;
width: 40px;
font: 14px/40px Helvetica, Arial, sans-serif;
color: white;
text-align: center;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
text-indent: -1px;
letter-spacing: -1px;
background: #e54930;
border: 1px solid;
border-color: #b33323 #ab3123 #982b1f;
border-radius: 21px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: -webkit-linear-gradient(top, #f75a3b, #d63b29);
background-image: -moz-linear-gradient(top, #f75a3b, #d63b29);
background-image: -o-linear-gradient(top, #f75a3b, #d63b29);
background-image: linear-gradient(to bottom, #f75a3b, #d63b29);
-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.checkout-price:before {
content: '';
position: absolute;
top: 3px;
bottom: 3px;
left: 3px;
right: 3px;
border: 2px solid #f5f8fb;
border-radius: 18px;
-webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.25), 0 -1px 1px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 0 -1px 1px rgba(0, 0, 0, 0.25), 0 -1px 1px rgba(0, 0, 0, 0.25);
}
input {
margin: 0;
line-height: normal;
font-family: inherit;
font-size: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.checkout-input {
float: left;
padding: 0 7px;
height: 32px;
color: #525864;
background: white;
border: 1px solid;
border-color: #b3c0e2 #bcc5e2 #c0ccea;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, #f6f8fa, white);
background-image: -moz-linear-gradient(top, #f6f8fa, white);
background-image: -o-linear-gradient(top, #f6f8fa, white);
background-image: linear-gradient(to bottom, #f6f8fa, white);
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
}
.checkout-input:focus {
border-color: #46aefe;
outline: none;
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #46aefe;
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1), 0 0 5px #46aefe;
}
.lt-ie9 .checkout-input {
line-height: 30px;
}
.checkout-name {
width: 150px;
}
.checkout-card {
width: 210px;
}
.checkout-exp,
.checkout-cvc {
margin-left: 15px;
width: 45px;
}
.checkout-btn {
width: 100%;
height: 34px;
padding: 0;
font-weight: bold;
color: white;
text-align: center;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.2);
border: 1px solid;
border-color: #1486f9 #0f7de9 #0d6acf;
background: #1993fb;
border-radius: 4px;
background-image: -webkit-linear-gradient(top, #4cb1fe, #229afc 40%, #138df6);
background-image: -moz-linear-gradient(top, #4cb1fe, #229afc 40%, #138df6);
background-image: -o-linear-gradient(top, #4cb1fe, #229afc 40%, #138df6);
background-image: linear-gradient(to bottom, #4cb1fe, #229afc 40%, #138df6);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.2);
}
.checkout-btn:active {
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
border-color: #075bba #0c69d2 #0f7de9;
background-image: -webkit-linear-gradient(top, #1281dc, #1593fc);
background-image: -moz-linear-gradient(top, #1281dc, #1593fc);
background-image: -o-linear-gradient(top, #1281dc, #1593fc);
background-image: linear-gradient(to bottom, #1281dc, #1593fc);
-webkit-box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.1), 0 1px rgba(255, 255, 255, 0.5);
}
:-moz-placeholder {
color: #acb6c8 !important;
}
::-moz-placeholder {
color: #acb6c8 !important;
opacity: 1;
}
::-webkit-input-placeholder {
color: #acb6c8;
}
:-ms-input-placeholder {
color: #acb6c8;
}
::-moz-focus-inner {
padding: 0 !important;
border: 0 !important;
}
CSS-стили для модального окна (window-style.css):
@import url(https://fonts.googleapis.com/css?family=Montserrat:400,700);
html, body {
width: 100%;
height: 100%;
margin: 0;
}
.page-wrapper {
width: 100%;
height: 100%;
}
.blur-it {
-webkit-filter: blur(4px);
filter: blur(4px);
}
a.btn {
width: 200px;
padding: 18px 0;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
font-weight: 700;
text-align: center;
text-decoration: none;
text-transform: uppercase;
color: #fff;
border-radius: 0;
background: #e2525c;
}
.modal-wrapper {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
background: rgba(41, 171, 164, 0.8);
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.25s ease-in-out;
transition: all 0.25s ease-in-out;
}
.modal-wrapper.open {
opacity: 1;
visibility: visible;
}
.modal {
width: 600px;
height: 400px;
display: block;
margin: 50% 0 0 -300px;
position: relative;
top: 50%;
left: 50%;
background: #fff;
opacity: 0;
-webkit-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.modal-wrapper.open .modal {
margin-top: -200px;
opacity: 1;
}
.head {
width: 90%;
height: 32px;
padding: 12px 30px;
overflow: hidden;
background: #e2525c;
}
.btn-close {
font-size: 28px;
display: block;
float: right;
color: #fff;
}
.content {
padding: 10%;
}
.good-job {
text-align: center;
font-family: 'Montserrat', Arial, Helvetica, sans-serif;
color: #e2525c;
}
.good-job .fa-thumbs-o-up {
font-size: 60px;
}
.good-job h1 {
font-size: 20px;
line-height: 1.5;
}
Выпадающие связанные списки работают, форма отправляется, открывая модальное окно и внося туда ответ от сервера, но окно закрыть я не могу. Когда я добавил в файл selects.js строки для открытия и закрытия модального окна,
$('.trigger').on('click', function() {
$('.modal-wrapper').toggleClass('open');
$('.page-wrapper').toggleClass('blur-it');
return false;
});
у меня «зависла» галерея. Окно по-прежнему не закрывается, и не помогает даже preventDefault() для отмены действия по умолчаню. Скорее всего, тут «война скриптов», и кто кого «душит», я не знаю. Нужно ли выносить функции для галереи и модального окна в отдельные файлы? Где эти файлы располагать – в отдельной папке со скриптами или непосредственно в корневой папке сайта, и зависит ли быстрота исполнения скрипта от длины его пути? И над какими скриптами надо писать “async”, а над какими – “defer”? Извините за нубство, но я не знаю проритеты исполнения скриптов, а также как и с кем бороться. Собственного домена у меня нет, сайт на локалхосте. Извините, но придётся разворачивать вложения.
Прикрепленные изображения
Прикрепленные файлы
-
stomkab.zip 3,87МБ
3 Количество загрузок:
-
sql.zip 119,07К
0 Количество загрузок:
