Пожалуйста, помогите!!!
Мне нужно исправить данный код следующим образом: на странице должна находиться только одна кнопка - при нажатии на неё должно открыться модальное окно. В нем находится слайдер. Как так сделать? Код рабочий, не хватает только модального окна. Также помогите все стили и кнопки со стилями "left" и "right" сделать невидимыми, до того как пользователь не нажмет на кнопку, открывающую модальное окно со слайдером.
Единственная кнопка, которая должна остаться на пустой странице без стилей.
<button class="click" onclick=""></button>
Там необходимо указать функцию, которая вызовет javascript код. Javascript код можете изменить по своему усмотрению. Также было бы норм если функция была бы одной универсальной с несколькими параметрами (left, right и т.д.), вместо нескольких функций.
То что здесь написано не должно быть отображено на странице до нажатия кнопки. Весь этот код надо поместить в js с помощью innerHtml. Помогите.
<html>
<body>
<div id="main">
<button class="left"><img src="larrow.jpg" onclick="slider.left();"></button>
<div id="scr"></div>
<button class="right"><img src="arrow.jpg" onclick="slider.right();"></button>
</div>
</body>
</html>
<style>
#main {
position:relative;
margin: 100px auto;
padding: 5px;
width: 660px;
height:360px;
background-color: brown;
border: 5px solid grey;
border-radius:15px;
}
#scr {
margin:20px auto;
width: 300px;
height: 320px;
margin-top:20px;
background-color: white;
background-size:cover;
border: 2px solid black;
border-radius:10px;
}
button {
position: absolute;
top: 150px;
width: 160px;
height: 160px;
font: 12pt arial,tahoma,sans-serif;
text-align: center;
}
.left {
left:500px;
}
.right {
right:500px;
}
</style>
<script>
var slider = {
slides:['ch01.jpg','ch02.jpg','ch03.jpg','ch04.jpg','ch05.jpg'],
frame:0,
set: function(image) {
document.getElementById("main");
document.getElementById("scr").style.backgroundImage = "url("+image+")";
},
init: function() {
this.set(this.slides[this.frame]);
},
left: function() {
this.frame--;
if(this.frame < 0) this.frame = this.slides.length-1;
this.set(this.slides[this.frame]);
},
right: function() {
this.frame++;
if(this.frame == this.slides.length) this.frame = 0;
this.set(this.slides[this.frame]);
}
};
window.onload = function() {
slider.init();
setInterval(function() {
slider.right();
},5000);
};
</script>
