Здравствуйте, есть такой код:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<style>
.text1 {
font-weight: bold;
font-size: 20pt;
color: rgb(255,0,31);
margin: 20px;
}
.text2 {
margin: 17px;
font-size: 14pt;
}
.container {
font-family: Geneva, Arial, Helvetica, sans-serif;
width: 400px;
text-align: center;
}
a {
color: black;
}
.btn1 {
border: 1px solid #BBBBBB; /* Рамка */
display: inline-block;
padding: 10px 30px; /* Поля */
text-decoration: none; /* Убираем подчёркивание */
color: #BBBBBB; /* Цвет текста */
}
.btn2 {
display: inline-block;
padding: 10px 15px; /* Поля */
text-decoration: none; /* Убираем подчёркивание */
color: white; /* Цвет текста */
background: red;
}
.btn1:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Тень */
background: linear-gradient(to bottom, #fcfff4, #e9e9ce); /* Градиент */
color: #a00;
}
.btncont {
padding-top: 21px;
}
</style>
<body>
<div class="container"><img src="http://s019.radikal.ru/i603/1707/11/c8f3ac298837.png" style="width: 400px;"/>
<div id='form1' style='display: none'>
<p class="text1">Дорогие читатели!</p>
<p class="text2">Наши и Ваши новости - теперь на<br>сайте ближайшего проекта:<br><a href="itf-dnipro.com">itf-dnipro.com</a></p>
</div>
<div id='form2' style='display: none'>
<p class="text1">Dear readers!</p>
<p class="text2">Our and your news - now on the site<br>of the nearest project site:<br><a href="itf-dnipro.com">itf-dnipro.com</a></p>
</div>
<div class="lang">
<div id='conten'></div>
<form name="form1">
<a href="#" style="text-decoration: none;" name="formbutton1" value="Главная" onclick="toggle('form1'); document.getElementById('div_for_insert').innerHTML = textru; document.getElementById('div_for_insert2').innerHTML = textru2;">RU<a>
<a href="#" style="text-decoration: none;" name="formbutton2" value="Главная" onclick="toggle('form2'); document.getElementById('div_for_insert').innerHTML = texten; document.getElementById('div_for_insert2').innerHTML = texten2">ENG<a>
</form>
<script>
var texten = "Read archive";
var texten2 = "In the DNIPRO project";
var textru = "Читать архив";
var textru2 = "В проект DNIPRO";
</script>
<script type='text/javascript'>
function toggle(id) {
document.getElementById("conten").innerHTML = document.getElementById(id).innerHTML;
}
toggle("form1");
</script>
</div>
<div class="btncont">
<a href="#" id="div_for_insert" class="btn1">Читать архив</a>
<a href="#" id="div_for_insert2" class="btn2">В проект DNIPRO</a>
</div>
</div>
</body>
</html>
Если сохранить как HTML файл и открыть в браузере, все работает корректно, но когда внедрил это на сайт (откроется сразу модалка с этой формой), почему-то меняется только текст кнопок и пропадают переключатели, в чем может быть проблема? вот ссылка:
_
my-trade-group.com
Потом сделал вот так:
<style>
.text1 {
font-weight: bold;
font-size: 20pt;
color: rgb(255,0,31);
margin: 20px;
}
.text2 {
margin: 17px;
font-size: 14pt;
}
.container2 {
font-family: Geneva, Arial, Helvetica, sans-serif;
width: 400px;
text-align: center;
}
a {
color: black;
}
.btn1 {
border: 1px solid #BBBBBB; /* Рамка */
display: inline-block;
padding: 10px 30px; /* Поля */
text-decoration: none; /* Убираем подчёркивание */
color: #BBBBBB; /* Цвет текста */
}
.btn2 {
display: inline-block;
padding: 10px 15px; /* Поля */
text-decoration: none; /* Убираем подчёркивание */
color: white; /* Цвет текста */
background: red;
}
.btn1:hover {
box-shadow: 0 0 5px rgba(0,0,0,0.3); /* Тень */
background: linear-gradient(to bottom, #fcfff4, #e9e9ce); /* Градиент */
color: #a00;
}
.btncont {
padding-top: 21px;
}
</style>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jQuery/jquery-1.11.0.min.js"></script>
<div class="container2"><img src="http://s019.***********/i603/1707/11/c8f3ac298837.png" style="width: 400px;"/>
<div class="text1" data-en="Dear readers!" data-ru="Дорогие читатели!">Дорогие читатели!</div>
<div class="text2" data-en="Our and your news - now on the site of the nearest project site:" data-ru="Наши и Ваши новости - теперь на сайте ближайшего проекта:">Наши и Ваши новости - теперь на<br>сайте ближайшего проекта:<br><a href="http://itf-dnipro.com">itf-dnipro.com</a></div>
<div class="lang">
<div id='conten'></div>
<form name="form1">
<a href="#" class="ru" style="text-decoration: none;" name="formbutton1" value="Главная">RU<a>
<a href="#" class="en" style="text-decoration: none;" name="formbutton2" value="Главная">ENG<a>
</form>
<script>
$('.en').on('click', function() {
$('[data-en]').each(function() {
$(this).text($(this).attr('data-en'));
});
});
$('.ru').on('click', function() {
$('[data-ru]').each(function() {
$(this).text($(this).attr('data-ru'));
});
});
</script>
</div>
<div class="btncont">
<a href="#" data-en="Read archive" data-ru="Читать архив" class="btn1">Читать архив</a>
<a href="#" data-en="In the DNIPRO project" data-ru="В проект DNIPRO" class="btn2">В проект DNIPRO</a>
</div>
</div>
но тогда модалка вообще перестала появляться. если убрать строчку с подключением js, все норм работает
Скрин ошибок :
s42.radikal.ru/i096/1707/e5/263c5aa5984f.png
Хелп плз
Простой
