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 not responding

I am using a modal that I used from a previous site where it works fine. Difference is this modal will only appear in IE9 only to direct users to a better browser. I was able to test it with just a alert and works fine.
However, for some reason, when I transfer the code I did for a previous site to this new site, the Modal isn't responding and to one point is not showing on the site.
When I try close the "Close" button, it will just refresh the page. I am not sure why and when I close the "X" button, it does not work either.
The code is inserted in a coldfusion file and I am not sure if it causing conflict or not.
Any help would be appreciated.
Here is what I did for the modal. ie-only detects whether it is IE9 or not:
<!---<div class="ie-only" style="overflow-y:hidden;">
<div class="modal fade in" id="myModal" aria-hidden="false" style="display:block; padding-right:17px;">
<div class="modal-dialog modal-md custom-height-modal">
<div class="modal-content">
<div class="modal-header" style="background-color:##428bca">
<button type="button" class="close" data-miss="modal">x</button>
<h3 class="modal-header" style="background-color:##428bca; text-align:center">Attention</h3>
</div><!---Modal-Header Div--->
<div class="modal-body">
<p style="text-align:center">You are using an outdated browser.<br /> <br /> Upgrade your browser today to better experience this site.</p>
</div><!---Modal-Body Div--->
<div class="modal-footer">
<p class="text-center"><a class="btn btn-default" data-dismiss="modal">Close</a></p>
</div><!---Modal-Footer Div--->
</div><!---Modal-Content Div--->
</div><!---Custom Height Div--->
</div><!---Modal Fade in Div--->
</div><!---Start of Modal Div--->
<!--End of Modal container--> --->
<!---<script>
$(function(){
$('##myModal').modal('show');
}
</script>
<div class="modal-backdrop fade in"></div>--->

It looks like there is a syntax problem in your code:
$(function(){
$('##myModal').modal('show');
}
This is incorrect; it should be:
$(function(){
$('#myModal').modal('show');
});
When corrected the Modal loads as a Modal, which in turn causes the Close button to operate as expected. Absent this the modal still loads (because you have in activated) but loads absent the overlay and absent the hook to Bootstrap's Modal JS which explains why your close button is non-functional.
You can see a functional example here: http://www.bootply.com/24IPYP8O3F
Why your code isn't working
The in class on your Modal div instructs Bootstrap to make that modal visible, and position it according to the Bootstrap CSS. Your jQuery is wrong though, so Bootstrap treats this like a bit of HTML that is just part of the document.
Once you correct your jQuery Bootstrap processes it as expected; as a Modal Javascript component. Once that happens it is presented with the overlay (as default) and the data-dismiss attributes are processed correctly.
The short of it is that the entire issue for why your Modal is not behaving like a Modal is that your jQuery is wrong.

Multiple bootstrap modals in a page

I made a bootstrap modal - it's working fine. But when I want to use a modal somewhere else in my site it overwrites the other modal.
Which part of the code do I need to change? And do I have to add like thousands of extra code to javascript for each modal, or can I make a group code?
Thanks!
I added this:
$('#clickme').click(function(e) {
$('#showModal').modal('show');
<script>
function showModal(){
$("#showModal").modal("show");
}
</script>
and:
<div class="modal fade" id="showModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Sign me up!</h4>
</div>
</div>
</div>
</div>

Don't try to do this. Bootstrap's modal is not designed to support that. Its own documentation says
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
It should have said "a lot of custom code". For instance, BS modals use a class on the body element, that is removed when it closed. Therefore, closing a second modal will also hide the first. Then you need special code to detect that a modal was previously open and restore the class on the body. It's much more trouble than it's worth.
Instead, use a "poor man's modal" for the second modal, just an absolutely positioned div you pop up somewhere. You don't need the overlay covering the screen anyway since it's already there from the first modal.