Блог

итак, я создавал модальное поле, и мне нужна кнопка, которая добавляет наложение при нажатии на нее. Итак, я сделал наложение вот css:

 .overlay{
    background-color: rgba(0, 0, 0, .5);
    height: 100vh;
    width: 100%;
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: 1;
    opacity: 0;
    display: none;
    transition: all 2s;
}
  

и затем я добавил этот класс при нажатии элемента

 .oa{
    opacity: 1;
    display: block;

}
  

вот html

 div id="maincon">
 <div class="overlay"></div>
<div id="secmaincon">
<div class="container">

    <div class="formtitle"><h1>Add Book</h1></div>
    <form action="" method="post" class="inputs"> {% csrf_token %}
    <div class="inputs">
        {% for field in form %}

        <div class="input">
        <label for="" class="labelinput">{{field.label}}</label>
        {{field}}
        </div>

        {% endfor %}
        <div class="input">
        <button type="submit">Submit</button>
        </div>
    </div>
    </form>
    
    

</div>
<div class="gc">
    <div class="grid">
        <div class="data" id="test">
            <div class="num"><p>1</p></div>
            <div class="title"><p>Crush It</p></div>
            <div class="author"><p>Gary Vaynerchunk</p></div>
            <div class="ISBN"><p>132132312</p></div>
        </div>
        <div class="data">
            <div class="num"><p>2</p></div>
            <div class="title"><p>Crush It</p></div>
            <div class="author"><p>Gary Vaynerchunk</p></div>
            <div class="ISBN"><p>132132312</p></div>
        </div>
        <div class="data">
            <div class="num"><p>3</p></div>
            <div class="title"><p>Crush It</p></div>
            <div class="author"><p>Gary Vaynerchunk</p></div>
            <div class="ISBN"><p>132132312</p></div>
        </div>
    </div>
</div>
</div>

<script src='{% static "js/booklist.js" %}'></script>
</div>
  

javascript выполнил свою работу и добавляет класс. все работает нормально, за исключением того, что переход не произошел, он просто отображает большой черный экран без перехода. есть ли какой-либо написанный мной CSS-код, который предотвращает это?