-1
Ola made a modal using only CSS and Javascript but at the time it reaches 100% of the screen the scroll bar does not work. Follow my HTML and CSS code
HTML
<div class="btnMsg">
<button class="ripple" v-on:click="teste">Nova Mensagem</button>
</div>
<div id="edit-modal-container">
<div class="modal-background" id="modalEditMsg">
<div class="modal">
<div class="wrap">
<div class="select">
<select v-model="formMsg.codTipo" class="select-text" required>
<option value="" selected></option>
<option value="1">Alerta</option>
<option value="2">Falha</option>
</select>
<span class="select-highlight"></span>
<span class="select-bar"></span>
<label class="select-label">Tipo</label>
</div>
</div>
<div class="form__group field">
<input v-model="formMsg.titulo" type="text" class="form__field" placeholder="Titulo da Mensagem"
name="msgTitle" id="msgTitle" maxlength="50" required>
<label for="msgTitle" class="form__label">Titulo da mensagem</label>
</div>
<div class="form__group field">
<md-datepicker v-model="formMsg.tempo">
<label>Data Limite</label>
</md-datepicker>
</div>
<div class="form__group field">
<input v-model="formMsg.url" type="text" class="form__field" placeholder="Titulo da Mensagem"
name="msgTitle" id="msgUrl" required>
<label class="form__label" for="msgUrl">URL</label>
</div>
<div class="form__group field">
<input class="form__field" type="file" id="uploadArquivo" accept="image/jpeg, image/png, application/pdf"
@change="()=>{alert('Mudei')}" />
<label class="form__label" for="uploadArquivo">Arquivo</label>
<p><small>Extenções aceitas: .jpg, .png. .pdf</small></p>
</div>
<div class="form__group field">
<textarea class="form__field" v-model="formMsg.mensagem" name="mensagem" id="mensagem" maxlength="300"
rows="2"></textarea>
<label class="form__label" for="mensagem">Mensagem</label>
</div>
<div class="form__group field">
<div class="switch" style="display: flex; flex-direction: row; justify-content: space-between; padding: 10px 30px;">
<p>Ativo</p>
<p>Leitura obrigatoria</p>
</div>
<div class="switch">
<div class="switch-button">
<input class="switch-button-checkbox" checked type="checkbox"></input>
<label class="switch-button-label" for=""><span class="switch-button-label-span">Não</span></label>
</div>
<div class="switch-button">
<input class="switch-button-checkbox" type="checkbox"></input>
<label class="switch-button-label" for=""><span class="switch-button-label-span">Não</span></label>
</div>
</div>
</div>
<div class="modalFoter">
<button>Salvar</button>
<button v-on:click="cancel">Cancelar</button>
</div>
</div>
</div>
</div>
CSS
html.modal-active, body.modal-active {
overflow: hidden;
}
#modal-container, #edit-modal-container {
position: fixed;
display: table;
height: 100%;
width: 100%;
top: 0;
left: 0;
transform: scale(0);
z-index: 1;
}
#modal-container.four, #edit-modal-container.four{
z-index: 0;
transform: scale(1);
}
#modal-container.four .modal-background, #edit-modal-container.four .modal-background {
background: rgba(0, 0, 0, .7);
}
#modal-container.four .modal-background .modal, #edit-modal-container.four .modal-background .modal {
animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.four + .content, #edit-modal-container.four + .content{
z-index: 1;
animation: blowUpContent 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.four.out .modal-background .modal, #edit-modal-container.four.out .modal-background .modal {
animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
#modal-container.four.out, #edit-modal-container.four.out {
animation: blowUpContentTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}
.modal-background {
display: table-cell;
background: rgba(0, 0, 0, .8);
text-align: center;
vertical-align: middle;
}
.modal-background .modal {
background: white;
padding: 50px;
display: inline-block;
border-radius: 3px;
font-weight: 300;
position: relative;
}
.modal-background .modal h2 {
font-size: 25px;
line-height: 25px;
margin-bottom: 15px;
}
.modal-background .modal p {
font-size: 18px;
line-height: 22px;
}
.content {
min-height: 100%;
height: 100%;
}
.modalFoter{
display: flex;
flex-direction: row;
justify-content: center;
margin-top: 25px;
color: #2d98da;
cursor: pointer;
z-index: 5;
}
.modalCab{
margin-bottom: 15px;
}
.modalCab a{
margin-left: 10px;
cursor: pointer;
}
.modalFoter a{
text-decoration: none;
}
.modalFoter a:visited{
text-decoration: none;
color: #2d98da;
}
.modalFoter a.attach{
margin-left: 20%;
}
div.modal-background div.modal p.dataCad{
margin-top: 15px;
}
Javascript
function teste() {
$('#modal-container').click(function () {
$(this).addClass('out');
$('body').removeAttr('class');
});
var modal = $('#modalEditMsg').detach()
$('#edit-modal-container').append(modal);
$('#edit-modal-container').removeAttr('class').addClass('four');
$('body').addClass('modal-active');
}
If you can help!
Hi Leonardo! Could you include your HTML too? This makes it easier to reproduce and find the error. Thanks!
– Arnon
Hello, I added my HTML code... Thank you so much for the tip!
– Leonardo