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>
Related
The following code successfully dynamically loads the "remote" page (data-remote="/booking-app-1") within the modal-body. However, this target page just contains a < script > which loads an IFrame (for an external payment application). This script does not execute. Is there a way to fix this, or a better way to just inject the booking applications's script via its URL directly into the modal-body?
I've also tried swapping the data-remote URL to my page with the URL direct to the booking app's script but this did not work.
<button type="button" class="btn" data-toggle="modal" data-target="#bookingApp-1" data-remote="/booking-app-1" >
BUY THING 1
</button>
<!-- Modal -->
<div class="modal fade" id="bookingApp-1" tabindex="-1" role="dialog" aria-labelledby="bookingApp-1" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-body">
(CONTENT LOADS HERE)
</div>
</div>
</div>
<script> // I will have multiple modals with different scripts on the page
$('body').on('click.modal.data-api',
'[data-toggle="modal"]', function(){
$($(this).data("target")+' .modal-body').load($(this).data('remote')); });
</script>
/booking-app.php:
<script type="text/javascript" src="https://bookeo.com/widget.js?a=12345&type=1234_not_the_actual_url"></script>
As the title, how can I close the modal using the button in remote content?
Here is the original page, index.html:
open modal
<div id="testModal" class="modal fade">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
</div>
</div>
</div>
and here is the page I want to open in the modal, modal.html:
<p>Hi, I am a modal</p>
<button class="btn btn-primary">close</button>
<script type="text/javascript">
$(function() {
$("#closeModal").click(function() {
// do something...(Ajax)
$("#testModal").modal('hide');
});
});
</script>
and I want the close button to close the modal in index.html but not using data-dismiss. Here is the full example in Plunker:http://plnkr.co/edit/EGjtma?p=info
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
Do nothing with any function, dismiss modal is build-in on Boostrap
I've checked you're code, and I found that what the modal does is grapping the whole content of modal.html file and place it inside a div with class name "modal-content"
So that's very easy, you can write this code in the close button inside the modal.html file and this will allow you to close the modal
<button class="btn btn-primary" onclick="$('#testModal').hide()">close</button>
Also I've few notes for you
There are many scripts that you've added and I'm not sure that you needed
Your code contains some Javascript errors, so check the browser console to fix them
Don't duplicate JS / CSS includes in modal.html, If these files already exist in the main file no need to add them again.
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.
kind of nested modal box for external links issue ,I had used the following code successfully to load external page in modal box but I cannot load external links inside that modal to open them as modal box the same way because I want it to be opened by default if the user opened it out of modal box
<div id="Site" class="modal fade page-load" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body" style="text-align: center">
<div data-role="page">
<div class="Popup">
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$("#Site .Popup").load("Site.html");
</script>
I have an issue with the ooyala video embed code:
<script height="433px" width="770px" src="http://player.ooyala.com/iframe.js#ec=x0bjlycjpE7-g-D_2ZMGTcpUDGwEamhd&pbid=4441ed2a84e74b66b60ce980f20deb84"></script>
When I add this script in the main body it works fine. But when I add this script in a modal it does not populate the video. Here is code i have tried.
<body>
<div>
<script height="433px" width="770px" src="http://player.ooyala.com/iframe.js#ec=x0bjlycjpE7-g-D_2ZMGTcpUDGwEamhd&pbid=4441ed2a84e74b66b60ce980f20deb84"></script>
</div>
<div class="modal" id="category_modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content about_us">
<div class="modal-body">
<script height="433px" width="770px" src="http://player.ooyala.com/iframe.js#ec=x0bjlycjpE7-g-D_2ZMGTcpUDGwEamhd&pbid=4441ed2a84e74b66b60ce980f20deb84"></script>
</div>
</div>
</div>
</div>
</body>
In the above code the 1st script load the video, but the 2nd script does not load the video. Is there any one who can suggest me what to do?
Does Ooyala have a javascript api? Sorry -- I am unfamiliar with this, but I think it does. I found this code snippet that someone has used within fancybox:
'beforeShow': function() {
var videoPlayer = OO.Player.create('playerwrapper', 'R0ZjB2NTqDw3YRWba9RIpRnF6D9lRYKP', {});
console.log(videoPlayer);
videoPlayer.play();
},
Note that 'beforeShow' is a fancybox callback function and your modal solution may have something different to use. Anyways typically loading in html for videos does not work in modal or lightbox type windows. And often javascript implementations need to be used after the modal is displayed to show the content.
I would try exploring this path.