Develop Reference

Bootstrap Popover AND a Modal (hover and click)

Scenario: user profile. I would like to be able to display a user name with a popover that displays a limited amount of information from the user profile. So far, I have that part working. I can build it on the fly and have it do what I need. The popover works perfectly.
What I would also like to do is have the user be able to click on the user name and bring up a Bootstrap modal form with more information about the user (if provided). The first problem I am seeing is that it appears the data-toggle attribute can only have a single setting:
echo '' . $user_row['user_name'] . '';
In that example, if I add the modal to the data-toggle attribute it doesn't seem to do me much good.
I have discovered by tinkering (and that is why the class 'userprof' in the code above), that a JavaScript click event can be triggered (right now all I'm doing is a basic JS alert dialog to test), but from there I would want to load the modal. I am not sure if I can make it all work.
I have a set of functions I've used successfully for another modal (calling this one 'userModal') that I got some help from someone here a while back with -- is it possible to call that from the click event?
// code to open the modal with the caption and description:
$('#userModal').on('show.bs.modal', function (event)
{
var button = $(event.relatedTarget); // Button that triggered the modal
var title = button.data('title'); // Extract info from data-* attributes
var body = button.data('body'); // Extract info from data-* attributes
var modal = $(this);
modal.find('.modal-title').text( title );
modal.find('.modal-body').append( body );
});
// when modal closes, clear out the body:
$('#userModal').on('hidden.bs.modal', function ()
{
$(this).find(".modal-body").text('');
});
Since these are "anonymous" functions I am not sure I can call them ... feeling a bit lost in the code here. Any help pointing me in the right direction would be great. I'd even be willing to consider a different idea, but I would like this kind of functionality (hover and click) for this situation and possibly something else. Thanks!

You're listening for the modal to show itself, when the DOM is showing the modal.
try using something like this, and use a button or a link with data-toggle="modal"
$(document).on('hidden.bs.modal', '#userModal', function ()
{
$(this).find(".modal-body").text('');
});
for reference https://jsfiddle.net/y063mu4t/1/

You can try:
$(document).on('click', 'a.userprof', function(){
$('#userModal').modal('show');
});
To make your callback function work, you need to add according data-* attribute to each of the <a> tag.

Show hidden DIV in bootstrap modal with jQuery

I have the following form:
Whenever the user clicks on 'Don't have a Paypal account?', I want to display another form within the modal.
However, after displaying the hidden DIV and scrolling the modal, the background fade will scroll as well.
My jQuery code:
var cardForm = $('#card-form');
cardForm.hide();
$("#display-card-form").click(function (e) {
cardForm.show();
e.preventDefault();
});

If possible, upgrade from v3.3.2 to v3.3.4. This issue will be resolved.
I attempted an example first in 3.3.4, as that is what I am on. Once you specified you were on 3.3.2, I downgraded and saw your issue. This was a bug they fixed in the latest release (#15881).
Hope this helps.

Nav & Cart Menu Issue not expanding not collapsing

The website I am customizing is http://flamelogs.com. When I resize my window for mobile view the cart menu expands and cannot collapse and the nav menu does not expand. Everything is fine when the window is at normal view. I really don't have great experience with Javascript/Jquery so I don't know how to troubleshoot this. If someone could please inspect the element and give me some help I would greatly appreciate it. I received the error about where Jquery targets the ul.accordion Uncaught TypeError: undefined is not a function
jQuery(document).ready(function () {
jQuery("ul.accordion li.parent").each(function(){
jQuery(this).append('<em class="open-close"> </em>');
});
jQuery('ul.accordion').accordionNew();
jQuery("ul.accordion li.active").each(function(){
jQuery(this).children().next("ul").css('display', 'block');
});
});

jQuery has predefined library of function. You are used following code in script. Where accordionNew() is not predefined function of Jquery Library so this issues shows in console of your browser. Please use predefine function.
TypeError: jQuery(...).accordionNew is not a function
jQuery('ul.accordion').accordionNew();
Please remove this code.

How to close all active bootstrap modals on session timeout?

I need to make a call when the user is idle and passes the session time out that will close all Bootstrap modals. The modals being active are dependent on what the user is doing at the time so I would like to do something that's is all encompassing.
I tried:
$('.modal').modal('toggle');
When the time out occurs but my modals are still there.

Use the following code:
$('.modal').modal('hide');
Also if you would like to do something if the modal is hidden then you can do this:
$('.modal').on('hidden', function () {
// write your code
});

The correct answer is missing something vital.
$('.modal').modal('hide') // closes all active pop ups.
$('.modal-backdrop').remove() // removes the grey overlay.
The second line is vital if you want the users to use the page as normal.

Try this way :
$('.modal.in:visible').modal('hide');

This is how i got it working in my project without using any factory or additional code.
//hide any open bootstrap modals
angular.element('.inmodal').hide();
I have a timeout function that emits logout as $rootScope.$emit('logout'); and the listener in my service is as follows:
$rootScope.$on('logout', function () {
//hide any open bootstrap modals
angular.element('.inmodal').hide();
//do something else here
});
If you want to hide any other modals such as angular material dialog ($mdDialog) & sweet alert dialog's use angular.element('.modal-dialog').hide(); & angular.element('.sweet-alert').hide();
I don't know if this is the right approach , but it works for me.

Using vanilla JS you can do the following
// import all your dependencies
import * as bootstrap from "bootstrap"
// close all modals but the one you want to open
const $modals = document.querySelectorAll('.modal')
$modals.forEach(modal => {
let currentModal = bootstrap.Modal.getInstance(modal)
if (currentModal) currentModal.hide()
})

When I dont know, wich Modal is open, I use the following for me...
$('.modal[id^="modal_"]').modal('hide');

jQuery popup (bPopup) fails to close as expected

I have created a popup using the lightweight jQuery plugin: bPopup.
I want the popup to appear on page load, and as such have the following code:
<script>
;(function($) {
$(window).load(function(){ //see edit below
$('#popup').bPopup({
opacity: 0.6,
modalClose: true
});
});
})(jQuery);
</script>
the customisation modalClose: true controls weather or not the popup is closed/dismissed on clicking on the popup, or surrounding overlay (see API)
However my popup successfully appears but does not dismiss, either when clicking on overlay OR when clicking on the element with the class that controls dismissal (by default, any element with class 'b-close' will also close the popup.
Any thoughts on where I am going wrong, or how I can find out what aspect is not working? Thanks
EDIT:
As per a suggestion in comments I have altered $(window).load(function(){ to $(document).ready(function(){however my problem persists

Discovered I was using 0.7.1 version of the popup, updated to 0.9.1 and that seems to have resolved the issue. Thanks to those who took a look.