CODEWITHSUNDEEP
javascriptjqueryhtml
GROVER.
GROVER.

Reputation: 4378

modal not opening when user clicks on modal trigger

I have a pretty basic modal function on my website which displays a like, repost & comment modal, above the track, in which trigger has been clicked.

However, I have had to set it up in an odd way due to the tracks being displayed procedurally through PHP.

This is my simplified markup:

<div class="f-wave-send">
    <div class="t__trigger-actions"> <!-- this is the modal trigger button !-->
        <span id="trigger-actions-modal"></span>
    </div>
    <div class="f-track__actions" id="track-actions"> <!-- this is the modal !-->
        <div class="close-actions"> <!-- this is the close button !-->
            <span></span>
        </div>
        <div class="f-track-actions-inner">
            <!-- modal contents !-->
        </div>
    </div>
</div>

This markup is duplicated across the page (to represent each track within the database); similar to Facebook's feed.

This is the JS which controls all the modals functionalities:

$(".t__trigger-actions").click(function(){ // when one of the modal triggers is clicked
    var parent = $(this).parent();
    parent.find(".f-track__actions").css("display", "block"); // get the modal within ONLY the same container to display
    parent.addClass("modal__open"); // and add the class modal__open to the container
});
$(".close-actions").click(function(){ // when the close button is clicked
    $(".modal__open").children(".f-track__actions").css("display", "none"); // hide the modal
    $(".f-wave-send").removeClass("modal__open"); // remove the modal__open class from the container
});
$(document).bind('click', function(e) { // if user clicks on anything but the main container
    if(!$(e.target).is('.modal__open')) {
        $(".modal__open").children(".f-track__actions").css("display", "none"); // hide the modal
        $(".f-wave-send").removeClass("modal__open"); // remove the modal__open class from the container
    }
});

I have commented where possible trying to explain what is going on. But I'll explain here once again;

When a user clicks on one of the many modal triggers within the document, it will get that triggers modal, and display it (and add the class modal__open to it's parent container).

If a user clicks on the close button (or on the document), close that same modal.

I've been stuck trying to figure this out for a little while now, so all help (and suggestions) are appreciated.

Thanks.

EDIT:

What I want to happen is, when the modal opens, it ONLY closes when the user clicks out of the modal, OR on the close button (if that makes sense).

Upvotes: 0

Views: 108

Answers (1)

Jones Joseph
Jones Joseph

Reputation: 4938

Is this what you want? - Added closest() instead of parent just in case its not a direct parent. - Added e.stopPropagation() to the 'open' button.

$(document).ready(function() {
  $(".t__trigger-actions").click(function(e) {
    var topClass = $(this).closest('.f-wave-send');
    topClass.find(".f-track__actions").css("display", "block");
    topClass.addClass("modal__open");
    $(this).next().addClass("modal__open");

    e.stopPropagation();
  });
  $(".close-actions").click(function() {
    $(".modal__open").children(".f-track__actions").css("display", "none");
    $(".f-wave-send").removeClass("modal__open");
  });


  $(document).bind('click', function(e) {

    var container = $(".modal__open");

    if (!container.is(e.target) && container.has(e.target).length === 0) {
      $(".modal__open").children(".f-track__actions").css("display", "none");
      $(".f-wave-send").removeClass("modal__open");
      $(".f-track__actions").removeClass("modal__open");
    }

  });
})
.f-track__actions {
  display: none;
}
.f-wave-send {
  border: 2px solid red;
}
.t__trigger-actions {
  height: 40px;
  border: 1px solid green;
}
.f-track__actions {
  height: 60px;
  border: 1px solid blue;
}
.close-actions {
  display: inline-block;
  width: 50px;
  height: 30px;
  background-color: #ddd;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="f-wave-send">
  <div class="t__trigger-actions">
    <!-- this is the modal trigger button !-->
    <span id="trigger-actions-modal">Open</span>
  </div>
  <div class="f-track__actions" id="track-actions">
    <!-- this is the modal !-->
    <div class="close-actions">
      <!-- this is the close button !-->
      <span>Close</span>
    </div>
    <div class="f-track-actions-inner">
      <input/>
      <!-- modal contents !-->
    </div>
  </div>
</div>

Upvotes: 1

Related Questions