CODEWITHSUNDEEP
jqueryangularbootstrap-4
Ajith
Ajith

Reputation: 845

Preventing dropdown from closing when close modal

I have a dropdown,inside that dropdown i have login button when login button pressed a modal popup will be shown and still the dropdown is visible in background when i close the modal it also closes the dropdown.How to prevent the dropdown from closing when modal popup close. enter image description here

Its An angular application and i'm using the jquery code to keep visible the dropdown. home.ts

 ngOnInit() {
  $('.dropdown.keep-open').on({
  "shown.bs.dropdown": function() { this.closable = false; },
  "click":             function() { this.closable = true; },
  "hide.bs.dropdown":  function() { return this.closable; }
  });
}

Upvotes: 0

Views: 1037

Answers (1)

Nikolay Schamberg
Nikolay Schamberg

Reputation: 324

Add this to your CSS:

.keepOpen {
    display:block;
}

Before closing your modal, do something like this: 

$(".dropdown").addClass('show');
$(".dropdown").removeClass('keepOpen');

The idea is that the "show" class gets removed, which makes dropdown invisible. So we need to work around that by having another temporary class, which will still keep the menu visible and will get immediately removed, as soon as "show" class is safely placed. Preferably, that temporary class should ONLY be placed upon the dropdown, when the following conditions are met:

1) the dropdown is open 2) you opened the modal

Hope this helps

Upvotes: 1

Related Questions