Javascript-форум - Изменение рабочего кода

Пожалуйста, помогите!!!

Мне нужно исправить данный код следующим образом: на странице должна находиться только одна кнопка - при нажатии на неё должно открыться модальное окно. В нем находится слайдер. Как так сделать? Код рабочий, не хватает только модального окна. Также помогите все стили и кнопки со стилями "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>