The problem statement is:
When a user clicks on select Attribute a modal should open and it should look like
Modal Header :
Select Attributes: Select All(Checkbox) X(close)
Modal Body
In the modal body,
- There should be all the checkboxes and every row should have 3 checkboxes only.
- There should also be a show more option button and checkboxes for which should be hidden and when a user clicks on that button, the hidden checkbox should be open below (in the code snippet provided by me, it is opening beside the button) and these checkboxes should be also in same pattern like 3 checkboxes in a row.
- Then below of it, there should be heading "Japan Attribute" and then checkboxes "ja1", "ja2", "ja3" that should come under this heading. Again the pattern should be same like 3 checkboxes in a row.
Modal Footer
- It should have Ok and Cancel buttons
- When a user clicks on the Ok button, the modal should close and if they again click on select Attribute, the modal should open but previously selected checkboxes should not be unchecked.
- When user clicks on the Cancel button, the modal should close and if they again click on select Attribute, the modal should open but previously selected checkboxes should be unchecked.
const select = document.getElementById("selectAttribute");
const modal = document.getElementById("myModal");
select.addEventListener("click", function() {
const form = document.getElementById("checkbox-form");
form.reset();
modal.style.display = "block";
});
function toggleOptions() {
var optionsDiv = document.getElementById("options");
if (optionsDiv.style.display === "none") {
optionsDiv.style.display = "block";
} else {
optionsDiv.style.display = "none";
}
}
const showMoreButton = document.getElementById("show-more");
const checkboxGrid = document.querySelector(".checkbox-grid1");
showMoreButton.addEventListener("click", function() {
checkboxGrid.classList.toggle("show-more-options");
});.popup-modal {
display: none;
position: fixed;
top: 54%;
left: 50%;
transform: translate(-50%, -50%);
box-sizing: border-box;
width: 1070px;
}
.popup-content {
background-color: #fefefe;
margin: 10% auto;
padding: 14px;
border: 1px solid #888;
width: 80%;
max-width: 850px;
}
.modal-buttons {
margin-top: 20px;
text-align: center;
}
.checkbox-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.checkbox-grid>div {
display: flex;
align-items: center;
}
.checkbox-grid>div>label {
margin-left: 10px;
}
#selectAttribute {
cursor: pointer;
}
.popup-body {
height: calc(100vh - 200px);
overflow-y: auto;
}
.options-container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20px;
}
.checkbox-grid1 {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 10px;
}
.option {
display: flex;
align-items: center;
}
#show-more {
background-color: #eee;
border: none;
padding: 10px;
margin-top: 10px;
}
#show-more:hover {
cursor: pointer;
}
.show-more-options {
grid-template-columns: repeat(3, 1fr);
}<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KK94CHFLLe+nY2dmCWGMq91rCGa5gtU4mk92HdvYe+M/SXH301p5ILy+dN9+nJOZ" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ENjdO4Dr2bkBIFxQpeoTz1HIcje39Wm4jDKdf19U8gI4ddQ3GYNS7NTKfAdVQSZe" crossorigin="anonymous"></script>
<div class="input-group-prepend selectBox multiselect" id="openPopup">
<span class="input-group-text" id="selectAttribute">Select attributes</span>
</div>
<div id="myModal" class="popup-modal">
<div class="popup-content">
<div class="modal-header" style="padding: 0rem 0rem;">
<h4>Select Attributes:</h4>
<div>
<input type="checkbox" id="select-all" name="options" value="select-all">
<label for="select-all" style="color: #4e73df"><strong>Select All</strong></label>
</div>
<button type="button" class="close-modal" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="popup-body">
<div class="form-group">
<form id="checkbox-form" class="checkbox-grid">
<div>
<input type="checkbox" id="ch1" name="Status" value="option1">
<label for="ch1">Status</label>
</div>
<div>
<input type="checkbox" id="ch2" name="Last Updated Timestamp in Live Repo" value="option2">
<label for="ch2">Last </label>
</div>
<div>
<input type="checkbox" id="ch3" name="Score" value="option3">
<label for="ch3">Score</label>
</div>
<div>
<button type="button" id="show-more" class="btn btn-primary" onclick="toggleOptions()">Show More Options</button>
</div>
<div class="form-group options-container">
<div id="options" class="checkbox-grid1" style="display: none;">
<div class="option">
<input type="checkbox" id="ch34" name="Sunday Opening Time" value="option34">
<label for="ch34">opt1</label>
</div>
<div class="option">
<input type="checkbox" id="ch35" name="Sunday Closing Time" value="option35">
<label for="ch35">opt2</label>
</div>
<div class="option">
<input type="checkbox" id="ch36" name="Monday Opening Time" value="option36">
<label for="ch36">opt3</label>
</div>
</div>
</div>
<hr>
<hr>
<h5 style="color: #4e73df">Japan Attributes: </h5>
<hr>
<hr>
<div>
<input type="checkbox" id="ch11" name="Primary Name (ja)" value="option11">
<label for="ch11">ja1</label>
</div>
<div>
<input type="checkbox" id="ch12" name="Primary Name (Translation ja-Kana)" value="option12">
<label for="ch12">ja2</label>
</div>
<div>
<input type="checkbox" id="ch13" name="options" value="option13">
<label for="ch13">ja3</label>
</div>
</form>
</div>
</div>
<div class="modal-footer">
<div class="modal-buttons" style="margin-top: 4px;">
<input type="submit" id="ok-btn" class="btn btn-success" value="Ok">
<input type="button" id="cancel-btn" class="btn btn-danger" data-dismiss="modal" value="Cancel">
</div>
</div>
</div>
</div>
2
Answers
You have bootstrap and it appears you are working too hard to do it manually in the CSS etc. here. Here I added some classes and did some slight HTML changes and removed nearly all the CSS. I also move the event instantiation from the HTML to the JavaScript.
NOTE: I did not wire up the X or OK or Cancel buttons but that is methinks another question and likely something you can do fairly easily given this example.