0

I am making a website, and want the "Meet the animals" button to scroll to the referenced section, then close the popup. Right now, it is scrolling down to the section I want but is not closing after it scrolls.

function hide() {
  document.getElementById('question').style.display = 'none';
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet">

<div class="modal fade" id="question" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <h4>What do you truly need in a furry companion?</h4>
      <br>
      <div class="card">
        <div class="card-body">
          <div class="row">
            <div class="form-group col-sm-4">
              <label for="typeOfAnimal">Type of Animal</label>
              <select class="form_select" id="typeOfAnimal" onchange="showDiv(this)">
                <option value="0" data-target="myCarousel">Any</option>
                <option value="1" data-target="dogCarousel">Dog</option>
                <option value="2" data-target="catCarousel">Cat</option>
              </select>
            </div>

            <div class="form-group col-sm-3">
              <label for="size">Size</label>
              <select class="form_select" id="size">
                <option>Any</option>
                <option>Small</option>
                <option>Medium</option>
                <option>Large</option>
              </select>
            </div>

            <div class="form-group col-sm-3">
              <label for="other">Other</label>
              <select class="form-select" id="other">
                <option>N/A</option>
                <option>Hypoallergenic</option>
              </select>
            </div>
          </div>
        </div>
      </div>
      <div class="card-footer">
        <a href="indexQUESTION.html#testimonials" class="main-button" data-toggle="modal" data-target="" data-dismiss="modal" onclick="hide()">Meet the animals</a>
        <button type="button" class="main-button" data-dismiss="modal">Cancel</button>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js"></script>
Manas Khandelwal
  • 3,790
  • 2
  • 11
  • 24
user8593985963
  • 1
  • 1
  • Check the browser console for any errors. I do not see any element in the posted code that has a `id="question"` attribute? – Paul T. Apr 13 '21 at 01:41
  • i edited the question if you can take another look :) – user8593985963 Apr 13 '21 at 02:04
  • What code is used to show the dialog? ... I'm not sure if this is jquery, bootstrap, or some other? – Paul T. Apr 13 '21 at 02:29
  • I am assuming you are using jquery. The solution could be 1. write on click event for button 2. use scrollTo function as shown in : https://stackoverflow.com/questions/19012495/smooth-scroll-to-div-id-jquery 3. use this to hide the modal. $('#modal').modal('hide'); – HarshaHR Apr 13 '21 at 02:52

0 Answers0