Вопрос или проблема
Итак, изначально у меня не было проблем. Все работало нормально. Я загрузил скрипт, и он давал только опцию «открыть чат».
Теперь он загружает все окно чата, уже открытое, но не страницу содержимого чата. Мне нужно нажать «выйти из чата» и «открыть чат», чтобы фактически открыть содержимое.
Я не хочу, чтобы окно содержимого открывалось, пока я не нажму «открыть чат».
(Для удобства я оставил CSS в виде тега стиля на веб-странице на данный момент. Обычно у меня есть ссылка на таблицу стилей в заголовке.)
HTML
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted;
z-index: 1000;
}
.button { background:url('http://www.haikimura.com/images/b.png');
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
z-index:4;
border-radius: 1em;
border:1px dotted #FFF0F5;
font-family: Garamond;
color: #fff;
font-size: 15px; }
.box {
position: fixed;
bottom: 5px;
right: 40px;
width: 250px;
padding: 0px;
text-align: center;
cursor: default;
background:url('http://www.haikimura.com/images/b.png') repeat; opacity:.80;
border:1px dotted #FFF0F5;
color: #fff;
font-family: Garamond;
font-size: 15px;
border-radius:5px; }
.prettyFrame {
width: 100%;
height: 90%;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: none; }
</style>
</head>
<body>
<button id="openForumBtn" class="box">открыть чат</button>
<div id="overlay"></div>
<div id="forumWindow" class="box">
<iframe id="forumFrame" src="" class="prettyFrame"></iframe>
<button id="closeForumBtn" class="button">выйти из чата</button>
</div>
<script>
document.getElementById('openForumBtn').addEventListener('click', function() {
document.getElementById('forumWindow').style.display = 'block';
document.getElementById('forumFrame').src="https://www.haikimura.com/"; // Замените на URL вашего форума
});
document.getElementById('closeForumBtn').addEventListener('click', function () {
document.getElementById('forumWindow').style.display = 'none';
document.getElementById('forumFrame').src="";
});
</script>
</body>
</html>
css
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted;
z-index: 1000;
}
.button { background:url('http://www.haikimura.com/images/b.png');
-moz-border-radius: 1em;
-webkit-border-radius: 1em;
z-index:4;
border-radius: 1em;
border:1px dotted #FFF0F5;
font-family: Garamond;
color: #fff;
font-size: 15px; }
.box {
position: fixed;
bottom: 5px;
right: 40px;
width: 250px;
padding: 0px;
text-align: center;
cursor: default;
background:url('http://www.haikimura.com/images/b.png') repeat; opacity:.80;
border:1px dotted #FFF0F5;
color: #fff;
font-family: Garamond;
font-size: 15px;
border-radius:5px; }
.prettyFrame {
width: 100%;
height: 90%;
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: none; }
js
document.getElementById('openForumBtn').addEventListener('click', function() {
document.getElementById('forumWindow').style.display = 'block';
document.getElementById('forumFrame').src="https://www.haikimura.com/";
});
document.getElementById('closeForumBtn').addEventListener('click', function () {
document.getElementById('forumWindow').style.display = 'none';
document.getElementById('forumFrame').src="";
});
Добавление display: none к #forumWindow в качестве начального значения решит вашу проблему
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity:0.9;
filter:alpha(opacity=50);
-moz-border-radius: 20px 20px 20px 20px;
-webkit-border-radius: 20px 20px 20px 20px;
border: 1px #000 dotted;
z-index: 1000;
display: none; // здесь
}
Ответ или решение
Причина, по которой окно чата открывается до того, как вы нажмете кнопку "открыть чат", заключается в том, что элемент с идентификатором forumWindow не скрыт по умолчанию. Чтобы решить эту проблему, необходимо установить стили таким образом, чтобы элемент по умолчанию был скрыт.
Вам нужно добавить свойство display: none; к селектору #forumWindow в вашем CSS. Это предотвратит его появление на странице до тех пор, пока вы не нажмете кнопку для его открытия. Вот так ваш CSS должен выглядеть:
#forumWindow {
padding: 10px;
height: 350px;
width: 250px;
opacity: 0.9;
filter: alpha(opacity=50);
-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border: 1px #000 dotted;
z-index: 1000;
display: none; /* Добавлено для скрытия окна чата по умолчанию */
}Теперь, когда #forumWindow изначально скрыт с помощью display: none;, он не будет отображаться на странице до тех пор, пока вы не нажмете кнопку "открыть чат".
Также убедитесь, что при нажатии кнопки openForumBtn вы устанавливаете forumWindow в отображаемое состояние с помощью document.getElementById('forumWindow').style.display = 'block';, как это уже сделано в вашем JavaScript-коде:
document.getElementById('openForumBtn').addEventListener('click', function() {
document.getElementById('forumWindow').style.display = 'block';
document.getElementById('forumFrame').src="https://www.haikimura.com/"; // Замените на ваш URL форума
});Таким образом, при корректировке начальных стилей, ваше окно чата будет оставаться скрытым до тех пор, пока пользователь не решит его открыть, нажимая кнопку. Если у вас есть другие вопросы или проблемы, не стесняйтесь обращаться.