fullscreen modal for chat in css

Question

I downloaded this modal popup script from this link https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal2

I want to use it to build a modal popup chat that will be responsive to all mobile devices. I have set the chat header to 10%, chat footer to 15%.

Please how do I:

1.) set the chat body to ensure that chat messages does not push down the modal footer once the messages exceeds the body may be adding scroll bar in the body since the remaining height percent is 75

2.)it will be responsive on mobile devices Thanks

Below is what i have done

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
height:10%;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
postion:fixed;
height:15%;
}
</style>
</head>
<body>

<h2>Animated Modal with Header and Footer</h2>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div style="width:100%;height:100vh;margin-top:-100px" class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>chat messages goes here</p><br>
<p>chat messages goes here</p>
<br><br><br><br><br><br><br><br><br>
<p>chat messages goes here</p>
<p>chat messages goes here</p>
<br><br><br><br><br><br><br>
    </div>
    <div style="" class="modal-footer">
Chat: <input type="text" placeholder="Chat Message" class="form-control">
      <div>Files Goes Here</div>
    </div>
  </div>

</div>

<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

</body>
</html>

Fecosos · Accepted Answer · 2018-03-28T05:20:52.813

0

You can set the max height of the modal-body so it won't push the footer and add overflow auto so you can scroll when needed only in the modal-body.

CSS

.modal-body {
    padding: 2px 16px;
    max-height: 75%; /* 10% header and 15% from footer */
    overflow: auto;
}

edited Mar 28 '18 at 05:20

answered Mar 28 '18 at 04:50

Fecosos

944
7
17

Why "max-height: calc(100% - 25%);" you can say direct max-height: 75%; – Hanif Mar 28 '18 at 05:15
Yes, of course just in case there's the need to perform some calculation based on something else. Edited makes more sense. – Fecosos Mar 28 '18 at 05:20

score 0 · Answer 2 · answered Mar 28 '18 at 04:58

0

According to your ideas, if you want auto height div with overflow and scroll when needed, this article will be the solution for you

answered Mar 28 '18 at 04:58

Triet Pham

88
1
14

fullscreen modal for chat in css

2 Answers2