We Keep Coding

Conflict Bootstrap 5 modal with slick script

I get strange issue with modals Bootstrap 5.
When I put modal, I mark on red, this is white page and here is placed modal content.
enter image description here
it just crashes the page and the modal doesn't display properly after click.
I try debug this, and I remove .js scripts step by step and I found when I delete this script for slick carousel then working correct.
after delete is correct and modal display correct:
enter image description here
I checked code in this file:
https://kenwheeler.github.io/slick/js/scripts.js
and I'm not sure what element could cause a conflict to occur. Can anyone help me review this file?
`modal example:
<div class="modal fade" id="exampleModalgrid" tabindex="-1" aria-labelledby="exampleModalgridLabel" aria-modal="true">
<div class="modal-dialog">
<div class="modal-content">
</div>
</div>
</div>`

Bootstrap modal at first page load

On page loading i am showing user some bootstrap modal window to show him some information. I would like to show this bootstrap modal only on first time, then every one next should not. How to achieve that? Is there something like function disable after first time? This is my simple code:
$(window).load(function () {
$('#dddd').modal('show')
});

This is a possible duplicate of this
Nevertheless, you can use cookies to achieve this. For your reference the following example is done using jquery cookie
<script src="/path/to/jquery.cookie.js"></script>
<script>
$(document).ready(function() {
if ($.cookie(‘pop’) == null) {
$(‘#dddd’).modal(‘show’);
$.cookie(‘pop’, ’7');
}
});
</script>

add this to your js file:
if(window.sessionStorage.fist_load_modal1 === undefined){
$('.first_load_modal').modal('show')
window.sessionStorage.fist_load_modal1 = true
}
Now you can use the class 'first_load_modal' to show your modal on fist load.
<div class="modal fade first_load_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
CONTENT HERE
</div>
</div>
</div>
Obs: Tested in bootstrap 4

jQuery terminal + bootstrap

I'm using a jQuery terminal (http://terminal.jcubic.pl/) with bootstrap on my page.
I'm trying to get the terminal to be inside a modal, I got the modal thing to work and I press two buttons to open up the modal..
But whenever I load the page I have to click somewhere on the body before I can press them otherwise nothing happens i doesn't even react on my clicks.
What am I doing wrong?
Terminal:
$('#terminal').terminal(function(command, term) {
if (command == 'help') {
term.echo("available commands are system, test ");
}
});
My modal:
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myModalLabel">Terminal</h4>
</div>
<div class="modal-body">
<div id="terminal"></div>
</div>
</div>
</div>
</div>

Apparently, when a page loads, there is no way to capture the Ctrl key from within the page without previous explicitly setting the focus on it.
You can set focus programatically, but you can't get the 'Ctrl' key... As far as I've looked up, this is the only key you can't use when the page loads, before acting on the page.
You should either consider changing your combination of keys, or forcing the user to click on the page, by, for example, a message he has to acknowledge.
Other than that, your code is working. The only flaw I see is that you close </body> twice.

This is old but for reference, in this question Bootstrap modal show event the answer say, how to add event when bootstrap modal is show (you use shown event). so you can use this:
$(document).ready(function() {
var term = $('#terminal').terminal(function(command, term) {
if (command == 'help') {
term.echo("available commands are system, test ");
}
}, {enabled: false});
$('#myModal').on('shown', function() {
term.enable();
})
});

Responsive CSS/Bootstrap: Show modal Dialog for small screen, otherwise show block element

I have a web page showing a list of items. When a user clicks on one of those items it shows information about that item. For a mobile user, I would like it to display a modal dialog that pops up and (pretty much) fills the screen - there's quite a lot of info to show. For a desktop, I would like this information to appear beside the list of items.
Does anyone know how you might go about designing this with as little mess as possible, ideally using the least styling possible to get it to work with Bootstrap, and preferably with minimal explicit Javascript? I am familiar with media queries, but short of copy-pasting big chunks of bootstrap.css, I'm not sure how to go about this.

<a class="link" href="#">Toggle thingie</a>
<div id="myModal" class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
...
</div>
</div>
</div>
if (!('ontouchstart' in document.documentElement)) {
// desktop
$('#myModal').hide();
}
$('.link').on('click', function (e) {
e.preventDefault();
if ('ontouchstart' in document.documentElement) {
// mobile or tablet: do modal thingie
$('#myModal').modal('toggle');
} else {
// desktop
$('#myModal').show();
}
}

Bootstrap - Want hide content's until modal loads

I'm using jquery modal to load multiple vimeo video's in a single page. I've been noticing that all the video's loading (34) in the DOM affects performance (creating a lag on load). So I want make sure that the video players are only loaded when the shown.bs.modal event has been triggered.
Pretty much a noob here, so I'm not sure how to do this.
Modal:
<div class="modal fade" id="<?php echo $target; ?>" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<iframe class="test" id="vimeo" src="//player.vimeo.com/video/<?php echo $id; ?>"
frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
</div>
<div class="modal-footer">
<?php echo $name; ?>
</div>
</div>
</div>
</div>
NOTE: READ COMMENTS ON ACCEPTED ANSWERED

I believe I have found a solution. Here is a working demo. If you check the networking section of your browser you will notice they do not load until the corresponding modal opens.
You can initially leave the src of your iframes empty, so it won't load anything. Store your URLs inside of an array and then you can use an event handler on the shown.bs.modal event as you mentioned.
var iframes = ["URL1","URL2","URL3"];
$('.modal').on('shown.bs.modal', function() {
var id = $(this).data('id');
$(this).find('iframe').attr('src',iframes[id]);
});
You will notice I am referencing a data-id, which you can add to each of your modals very easily.
<div class="modal fade" id="modal1" data-id="0" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal fade" id="modal2" data-id="1" tabindex="-1" role="dialog" aria-hidden="true">
I started with 0, since arrays start with 0 index.
***Note - The downfall to this is that the iframe will have to load the URL EVERY TIME you open the corresponding modal.
EDIT: Actually, using another data attribute, you can avoid the issue of URLs loading every time. Updated demo.
<div class="modal fade" id="modal1" data-id="0" data-loaded="false" tabindex="-1" role="dialog" aria-hidden="true">
Check the attribute in the shown.bs.modal event before replacing the URL if it is already loaded.
$('.modal').on('shown.bs.modal', function() {
var loaded = $(this).data('loaded');
if(loaded == false) {
var id = $(this).data('id');
$(this).find('iframe').attr('src',iframes[id]);
$(this).data('loaded', 'true');
}
});
EDIT 2 - With IDs in a php array, you can convert them to a JS array like this:
var iframes =<?php echo json_encode($php_array);?>;

To clear modal when its closed use
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
For the other part not too sure on what your trying to do. You could look into jScroll so that it will only load the rest of the videos when the user starts to scroll through the modal.
Edit: You could load the content of your modal from an external html file, that way the video iframe will only be loaded when someone clicks on the modal link.