I'm having a problem opening the modal. What I notice is that there is no lower margin of the modal, as you can see from the figure.

I have added JavaScript in case anyone cares.

So you can see where the modal starts from but not where it ends. How can I solve this problem? Can you kindly help me?

var modal = document.getElementById("myModal");

var btn = document.getElementById("myBtn");

var span = document.getElementsByClassName("close")[0];

btn.onclick = function() {
  modal.style.display = "block";
}

span.onclick = function() {
  modal.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

.modal {
            display: none;
            position: fixed;
            z-index: 1;
            padding-top: 100px;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto;
            background-color: rgb(0, 0, 0);
            background-color: rgba(0, 0, 0, 0.4);
            }

        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            z-index: 999;
        }

<div id="myModal" >

                    <!-- Modal content -->
                    <div >
                        <span >&times;</span>
                        <div >
                            <div>
                                <h1  id="title1">
                            </div>

                            <div >
                                <p  id="txt1"> </p>
                            </div> <br>

                            <div > <img id="img" src one rror="this.onerror=null;" style="width:50%"> </div>
                            <br>

                            <div >
                                <p  id="txt2"> </p>
                            </div> <br>

                            <div > <iframe id="idframe" width="600" height="400"> </iframe> </div> <br>
                        </div>

                    </div>

                </div>

CodePudding user response：

It seems you are adding the margin to the wrong element. Just change

.mycontent{
    margin-bottom: 10%;
}

To this instead

.modal-content{
    margin-bottom: 10%;
}