Bootstrap model in liferay - javascript

I build a portlet in Liferay with many bootstrap modal. But my problem is I can not click on datetimepicker or some button. I found the reason is "modals cover picker although it is hidden". I get over it by show all modal then hide them==> picker work well.
But at start time when I load my page, modal show in a short time=>new problem.
I used to hide modal without show them but it not work. Can you show me how to get over it.

Related

Elementor Pop-up with jQuery

I have a problem. I made a custom Pop-up using elementor and now added a custom jQuery code for the pop-up menu to close on the menu-item click. I have ordered the Elementor to open via action in elementor and close via the code. Picture of elementor action for popup
The code is following.
<script>
jQuery(function($){
$(document).on('click','.elementor-location-popup .menu-item', function(event){
elementorProFrontend.modules.popup.closePopup({}, event );
});
});
</script>
The problem is, that every click on different elements on the page, for example the admin bar, the contact form etc, the popup opens, event though not ordered to do so.
Has anyone had the same issue with elementor popup?
Has it something to do with the jQuery document value? Or should I seek help from elementor?
Got the fix. It is an Elementor bug.. They still have not fixed it, even with the latest update. The issue was not with jQuery code, but with Elementor settings.
I had to eliminate all the popup conditions and triggers from elementor side and just use a dynamic elementor button opening and jQuery button closing.
Somehow the triggers produced the bug, that opened the popup on a random page click.

Bootstrap tooltip doesn't dissapear when it triggers the same time datatable is loading

My datatable loads a new table every time for the year displayed in the input field, if it is changed. The tooltip works as intended if I wait for the datatable to load completely. If I hover an element with a tooltip while a new table is loading then the tooltip will be stuck.
GIF showing the problem
How can I make the stuck tooltip dissapear in this case?
I have tried the solutions here:
show bootstrap tooltip on load and auto hide after few seconds
Bootstrap tooltip doesn't go away with a back button click and AJAX calls

Kendo Panel Bar not working for alternative load of the panel

I have a requirement where i have to show a popup on click of a button and in the popup i have to show 2 panels. But on alternate click of the button when the popup appears, nothing happens on clicking the panel. I had faced a similar type of issue where a grid was not loading properly on alternate click of the tab where it was present. I just emptied the grid using $("#GridId").empty before every load and it worked. But i don't understand how to implement that concept in case of panel. I am using Kendo panels and grids. I am setting the panel items using <ul> <li> tags. It's working when i give expandMode: "single" for the panel bar but my requirement is to show all the panel dropdowns. Can someone help resolve this issue?
I solved the issue by adding this line $("#Gridname").kendoPanelBar() in the $(document).ready function of the js file

Loading Bootstrap modal with jQuery inside - breaks original modal

I have a Bootstrap modal that is using requireJS to load jQuery inside and run JS, that show output in modal.
This setup works great for first opening of the modal. If I close the modal and try to open it again:
$("#modalLogin").modal();
I get:
TypeError: undefined is not a function
It seems that loading of jQuery inside of modal is breaking jQuery modal functionality of main page. Is there a way to re-enable .modal() method in original page, once I close the modal?
According to the boostrap modal's documentation,
You can call .modal() to initiate it, with or without options,
But you have to precise the method when you want to open / hide it :
$('#modalLogin').modal('show');

Bootstrap modal dialog tabbing in behind page

When I initialize and show bootstrap modal dialog, all elements on the page behind the dialog and expose mask are still reachable by tab navigation.
Here on official Bootstrap page that is not the case. There is no any specific code for this, just simple modal show.
Any ideas how to disable tabbing behind the modal?
Consider migrating to Bootstrap 3, where this is not an issue.

Categories