Develop Reference

hide bootstrap modal from javascript without using jquery

How to hide bootstrap modal from javascript without using jquery.
None of the following work :
document.getElementById('id_1').modal('toggle');
document.getElementById('#id_1').modal('toggle');
document.getElementById('id_1').modal('hide');
If I add a class hide it works. The modal hides, But the main screen stays grey. Focus never shifts to the main screen until I click on the screen.
Thanks

You can use v-if attribute on modal to toggle it. <b-modal v-if="isVisible">

I tried many solution but the one I created and worked for me is:
add a close button (the default one given by Bootstrap modal template) and if you want you can add a d-none class to it if you want to hide it.
Then in your Javascript code :
var close = document.getElementById("closeButton");
close.click();

Reinitialise only new appended FB button

I have an "article" page where the selected article is displayed by default and another articles are ajax-appended to the bottom after clicking on "next" button.
Every article has its own FB share button.
I can reinitialise all the buttons by FB.XFBML.parse(); command, but the existing buttons disappear for a short moment during reinitialisation.
Is there a way to reinitialise only last appended button or somehow to prevent visual disappearing of the buttons?
(Btw. this issue does not apply to twitter button, which can be reinitialised by twttr.widgets.load(); command)

FB.XFBML.parse() function takes a parameter with selected DOM element. Then it will only reinitialise share buttons that are present in the DOM element:
var buttons = newblog.find('.share-buttons')[0];
FB.XFBML.parse(buttons);

Why does Ckeditor show a removed tab in a dialog?

I have removed the "Advanced"-tab of my Ckeditor table dialog but when I look at the properties of an existing table then the advanced tab is still there. In my config.js I have this
config.removeDialogTabs = "image:advanced;table:advanced;link:advanced;link:target";
When I create a new table then the "Advanced"-tab doesn't show but when I edit an existing table it is there. I'm using version 4.5.6. Why is a removed tab shown?
Here is a screen recording:

The same dialog is actually defined twice with different names. The first one is called table and the other one is called tableProperties.
So you need to add tableProperties:advanced as well:
config.removeDialogTabs = "image:advanced;table:advanced;tableProperties:advanced;link:advanced;link:target";

Javascript event on form add fields

I've got a rails app using bootstrap with a form page that has the option to add additional form fields. The tutorial from this Railscast episode heavily influenced this form page add fields feature. I have a need to watch the add fields so that I can hide a warning panel in the new well created. Here is the code that will not work(in coffeescript):
$('#classifications_forms').on 'change', (event) ->
container = $('.classifications_form').last()
$('#premium-divide', container).hide()
Here is the code in jquery:
$('#classifications_forms').on('change', function(event) {
var container;
container = $('.classifications_form').last();
return $('#premium-divide', container).hide();
});
I have tried an on click event for the add fields button, but it's late in the event watching as it will not hide the panel. If I hit the button a second time, it will hide the panel on the previously created well, so I know the code was working to hide the panel. My thinking is to hide the panel on the last well created, and I thought that a change on #classifications_forms would give me the event needed to hide the last well, but I guess its missing something on the event. What is missing above?
Here is a jsfiddle demonstrating the problem.

Because I was using bootstrap, I found a class to apply to the panel which took care of my problem:
.hidden

How to load leanmodal div contents onclick

My store's collection pages have the quick-view feature where hovering over products images allow you to click 'Quick View' to open a modal dialog window with summary info about the products. This is done with the leanModal plugin.
See: http://froy.com/collections/beds-mattresses for example. Store is powered by Shopify.
The problem is, when the page initially loads, all the elements within the modal are loaded despite being hidden. This unnecessarily slows down the site. I'd like to load the contents within the modal only after the user clicks on 'Quick View.'
<div class="quick_shop"> <!--This is the modal trigger-->
<div class="quickview-text">Quick View</div>
</div>
<div class="modal">
<!--All contents of the modal dialog window go in this div-->
</div>
Script:
$('.quick_shop').leanModal(); //Calls the function on the modal trigger
(function($){$.fn.extend({leanModal:function(_1)...});})(jQuery);
//The above line of code is for leanModal. I didn't paste entire thing cause it's long
Any help would be much appreciated! I'm new and learning so this is all very exciting.

The purpose of the modal div is to have a precise view on one specific element.
In your case (on the webpage you provided), the modal is loaded for each element, which breaks the sense of what you're trying to achieve.
I've never used the leanModal plugin but I guess you could try doing the following:
When the "Quick view" is pressed, find the closest element with jQuery .closest() method by searching the element with class .quick_shop, THEN leanModal that single element and display it:
$(".quickview-text").on("click", function(e){ $(this).closest(".quick_shop").leanModal(); //Then display it with .show() if it's hidden by default });
Once the modal is closed you can delete the element instead of hiding it with the jQuery's remove() method.