We Keep Coding

How to Import remote modal's javascript

I'm trying to make a remote modal(bootstrap4) in my webpage, I use the below URL and it works with only the remote file's modal-content, while its javascript didn't work.
Bootstrap 4 with remote Modal
Can someone tell me how to let the javascript of modal HTML into the target page which shows the modal in remote?
The target HTML code:
https://codepen.io/gorilla0823/pen/qLXQaM
The remote modal:
https://codepen.io/gorilla0823/pen/VqzVpR
I have no idea why it works differently from my origin one. (My original one is the modal with full function, I want to let the modal remote to the target page .)
The Modal(With my translation function, and this is what I desire to display in my target page with a link):
http://sehomework.000webhostapp.com/translation/index(origin).html
The modal's function:
The first option is before translation, while the second option is after translation, You can select the language then translating or recognizing the letter you type, this is the full modal I'd like to display. However, it works with the content body now, it'll show the error message(speech SDK haven't found ) if the code doesn't fully work.
I want to let the modal remote to the page with a link, the content of its body works, while the script doesn't work, I've commented the code with which works and which doesn't work, the link is https://codepen.io/gorilla0823/pen/VqzVpR ( the same as the remote modal )
<!-- target.html -->
<div class="modal fade" id="theModal" tabindex="-1" role="dialog" aria-
labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
I put my modal-content here.But the script doesn't work
</div>
</div>
</div>
<script type="text/javascript">
$('#theModal').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var modal = $(this);
modal.find('.modal-content').load(button.data("remote"));
});
</script>
<!-- remote modal -->
<div class="modal-header">
<script>
//It doesn't work
</script>
</div>
<!-- Modal body -->
<div class="modal-body">
<div id="warning">
</div>
<script src="microsoft.cognitiveservices.speech.sdk.bundle.js"></script>
script>
//It doesn't work
</script>
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>

Making a modal window only show once

I use a Bootstrap modal on the index page of my site, but I only want it to show Once per user visit.
I've tried out the answers shown here:
Display A Popup Only Once Per User per-user but the problem I run into is that the javascript "popup" conflicts with my modal "onload". And I'm not sure how to resolve it.
This is my onload function:
$(window).load(function(){
setTimeout(function() {
$('#onload').modal('show');},2000);
});
and this is my HTML:
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" id="onload">
<div class="modal-dialog">
<!-- Modal content-->
</div>
</div>
I tried to wrap the whole modal div with the "popup" div but that did weird things to my website (dimmed the whole page but otherwise did nothing)
I think I need to use a cookie or localStorage but I don't know how to configure them or trigger them from the onload javascript.

Bootstrap Modal ajax content, animation loading

I use the Bootstrap Modal by loading content from another page and that data is so complicated (multi query/dynamic form), so when open the modal, it will have a little bit stuck.
I want some animation or indicator to show that modal has not been crashed... please wait.
I have to search and try many ways but doesn't work, in some solution the .gif is stuck too when modal load. I use this method for remote content. http://jsfiddle.net/cp67J/1994/
<!-- Link trigger modal -->
<a href="remote_content.php?id=1" data-toggle="modal" data-target="#myModal" >
Launch Modal content 1
</a>
<a href="remote_content.php?id=2" data-toggle="modal" data-target="#myModal" >
Launch Modal content 2
</a>
<!--MODAL SECTION-->
<div class="modal fade" id="myModal" role="basic" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
</div>
</div>
</div>
</div>

Dont know if bootstrap modal supports this. But simple solution would be.
Show normal modal with loading animation.
Load your content with ajax in background.
Replace loader with loaded data.
P.S. you can also experiment with $.fn.load and allow jQuery to do 2. and 3. steps for you.

Bootstrap Modal - Set remote path and open programmatically

I'm using bootstrap 3 modals using the remote path option as follows.
view
<div id="modCurIssue" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<!--- content from mystuff.htm will appear here --->
</div>
</div>
</div>
This works fine, but instead of clicking the link I want to open the modal programmatically!
I'm trying to avoid triggering a click() event on the link if possible.

As of 3.2.1 the remote option is deprecated and will be removed in future versions. It is advisable to load the content explicitly and then call the show method to open the modal:
$('#modCurIssue').find('.modal-content').load( 'mystuff.htm', function() {
$('#modCurIssue').modal( 'show' );
});

According to the methods section on http://getbootstrap.com/javascript/#modals it's quite easy:
$('#modCurIssue').modal('show')

view
<div id="modCurIssue" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<iframe src="mystuff.htm"></iframe>
</div>
</div>
</div>

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.