【jQuely】ブラウザのリロード時にモーダルウィンドウを非表示にしたい

解決したいこと
添付のコードのように、複数あるモーダルウィンドウがあります。(文字数制限のため一つのモーダルのみ記述しています)
これらは、jQuelyのクリックイベントで表示、非表示を管理していますが、
ブラウザをリロードした際、一瞬だけ隠れているはずのモーダルが表示されるという状態です。

当然ユーザーがURLを読み込んだ際に同じような動きになると思うので解決したいです、
よろしくお願いします。

 <!-- コーディングスキル -->
            <div class="skills__block">
                <h3 class="skills__category-title">Coding skill</h3>   
                <ul>
                    <li class="skills__list-item">
                        <p class="skills__name text__weight-bold" id="open-modal">HTML5</p>
                        <p class="skills__text">「HTML」という、Webサイトを作る上で必須のマークアップ言語を学びます。
                        (プログラミング言語ではありません)</p>

                        <a href="" class="skills__open-modal" id="modal__open-html">何ができるの？</a>

                        <hr class="skills__line">

                        <!-- HTML モーダル -->
                        <div id="modal-html"  class="modal_all">
                            <div class="modal-inner">

                                <div class="modal__close-button" id="modal__close-html">
                                    <img src="./images/close-icon.png" alt="閉じるボタン">
                                </div>

                                <div>
                                    <div class="modal__flex">
                                        <div class="skills-icon"><img src="./images/html.png" alt="HTMLのアイコン"></div>
                                        <p class="skills-title">HTMLとは</p>
                                    </div>

                                    <hr class="modal__line">
                                </div>

                                <div>
                                    皆さんが日頃から閲覧している<br>
                                    <span class="text__weight-bold">Webサイトの骨組み</span>はこの言語から作られています！<br>
                                    もちろんこのLP(ランディングページ)もHTMLが使われています。<br>

                                    <p class="modal__text-margin">
                                    プログラミング言語ほど難しくなく、シンプルで覚えやすい言語ですが、
                                    実はSEO対策などとも関係があるので、意外と奥の深い言語だと言えます！</p>
                                </div>
                            </div>
                        </div>
                        <!-- //HTML モーダル -->
                    </li>
                </ul>
            </div>
            <!-- //コーディングスキル -->
コード

    /* モーダルウィンドウ */
    .modal_all{
        width: 640px;
        border:solid 1px #000;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: #fff;
        z-index: 100;
    }
    .modal-inner{
        padding: 64px 40px 64px;
        position: relative;
    }
    .modal__close-button{
        position: absolute;
        top:25px;
        right:40px;
        cursor: pointer;
    }
    .modal__flex{
        display: flex;
        align-items: center;
    }
    .skills-icon{
        width: 64px;
        margin-right: 12px;
    }
    .skills-title{
        font-weight: bold;
        font-size:2.4rem;
        letter-spacing: 0.15em;
    }
    .modal__line{
        margin: 16px 0px 16px;
    }
    .modal__text-margin{
        margin-top: 24px;
    }
    .modal__bg{
        position: fixed;
        top:0;
        left:0;
        height: 100vh;
        width: 100%;
        background-color: #000;
        opacity: 0.6;
    }
    /* //モーダルウィンドウ */
コード

//モーダルウィンドウ
$(function(){


    //html-modal
    $("#modal-html").css('display', 'none');
    $("#modal__bg").css('display', 'none');

    $("#modal__open-html").on("click",function(){
        $("#modal-html").fadeIn(200);
        $("#modal__bg").show();
        return false;
    });

    $("#modal__close-html,#modal__bg").on("click",function(){
        $("#modal-html").fadeOut(200);
        $("#modal__bg").hide();
        return false;
    })
    //html-modal






});
コード