Scribd
Carregar
16 visualizações2 páginas

Modal para Seleção de Opções em HTML/CSS

O documento apresenta um código HTML que implementa um modal para seleção de opções, incluindo checkboxes, dropdowns e campos de entrada. O modal permite ao usuário escolher matérias, número de questões, acertos, dificuldade e data, com botões para salvar ou cancelar a seleção. As opções selecionadas são exibidas em uma lista na parte inferior do modal.

Enviado por

gabrielfsoares2007
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd
16 visualizações2 páginas

Modal para Seleção de Opções em HTML/CSS

O documento apresenta um código HTML que implementa um modal para seleção de opções, incluindo checkboxes, dropdowns e campos de entrada. O modal permite ao usuário escolher matérias, número de questões, acertos, dificuldade e data, com botões para salvar ou cancelar a seleção. As opções selecionadas são exibidas em uma lista na parte inferior do modal.

Enviado por

gabrielfsoares2007
Direitos autorais
© All Rights Reserved
Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.
Formatos disponíveis
Baixe no formato PDF, TXT ou leia on-line no Scribd

HTML + CSS Integrado com Modal

HTML

<h2>Selecione as opções</h2>
<button class="collapse-btn" onclick="openModal()">Abrir Seleção</button>

<div id="myModal" class="modal">


<div class="modal-content">
<span class="close" onclick="closeModal()">&times;</span>
<h3>Escolha as opções:</h3>

<div class="checkbox-container" id="habilitiesContainer">


<label><input type="checkbox" name="hOption" value="H1"> H1</label>
<label><input type="checkbox" name="hOption" value="H2"> H2</label>
<label><input type="checkbox" name="hOption" value="H3"> H3</label>
<label><input type="checkbox" name="hOption" value="H4"> H4</label>
<label><input type="checkbox" name="hOption" value="H5"> H5</label>
</div>
<button class="collapse-btn" onclick="toggleCheckboxes()">Mostrar/Esconder
Opções</button>

<div class="select-container">
<label for="subjectSelect">Selecione a Matéria:</label>
<select id="subjectSelect">
<option value="">-- Escolha uma matéria --</option>
<option value="Linguagens">Linguagens</option>
<option value="Matemática">Matemática</option>
<option value="Natureza">Natureza</option>
<option value="Humanas">Humanas</option>
</select>
</div>

<div class="input-container">
<label for="questions">Número de Questões:</label>
<input type="number" id="questions" min="1" placeholder="Digite o total de
questões">
</div>

<div class="input-container">
<label for="corrects">Número de Acertos:</label>
<input type="number" id="corrects" min="0" placeholder="Digite o número de
acertos">
</div>

<div class="input-container">
<label for="difficultySelect">Dificuldade:</label>
<select id="difficultySelect">
<option value="">-- Selecione a Dificuldade --</option>
<option value="Fácil">Fácil</option>
<option value="Médio">Médio</option>
<option value="Difícil">Difícil</option>
HTML + CSS Integrado com Modal
</select>
</div>

<div class="input-container">
<label for="date">Data:</label>
<input type="date" id="date" placeholder="Selecione a data">
</div>

<div class="modal-footer">
<button class="btn btn-save" onclick="saveSelection()">Salvar</button>
<button class="btn btn-cancel" onclick="closeModal()">Cancelar</button>
</div>
</div>
</div>

<div class="output">
<h3>Opções Selecionadas:</h3>
<ul id="selectedList"></ul>
</div>

Você também pode gostar