I am very new to bootstrap and am trying to make my video sound stop playing when I click out of the modal.
I have looked on similar threads and tried the solutions but none seem to be working for me.
I know there must be a jQuery solution somewhere! I also want it to apply to everything in the class 'portfolio-modal modal fade'.
There are also two ways of closing - the X in the top right corner and the button underneath the video. Does this make a difference?
Thank you!
<div class="portfolio-modal modal fade" id="portfolioModal2" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-content">
<div class="close-modal" data-dismiss="modal">
<div class="lr">
<div class="rl">
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-lg-8 col-lg-offset-2">
<div class="modal-body">
<h2>Growing, Custo by LIDL</h2>
<p class="item-intro text-muted">Music Production for Growing, Custo.</p>
<iframe width="500" height="281" src="https://www.youtube.com/embed/knjuAUOWgas" frameborder="0" allowfullscreen></iframe>
<p>Description</p>
<button type="button" class="btn btn-primary" data-dismiss="modal"><i class="fa fa-times"></i> Close Project</button>
</div>
</div>
</div>
</div>
</div>
</div>
Related
Notice some intermittent load failure when opening up the ngx-bootstrap-modal to load the ngx-image-cropper. Did some try and error, I've noticed that as long as I open the modal before loadImageFailed() triggered. The cropper will load and everything seems to work fine. Is it got to do with not rendering to the DOM?
I can't find the cause of it though, or am I missing something?
Hope to get some light on this.
Thanks in advance.
Here is how the modal looks like:
<!-- EDIT MODAL -->
<article bsModal #lgModal="bs-modal" class="modal fade" tabindex="-1" role="dialog"
aria-labelledby="dialog-sizes-name1">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<form (ngSubmit)="instructorService.updateCover(instructor.id)">
<section class="modal-header">
<h4 id="dialog-sizes-name1" class="modal-title pull-left">EDIT BANNER</h4>
<button type="button" class="close pull-right" (click)="lgModal.hide()" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</section>
<section class="modal-body">
<cropper></cropper>
</section>
<section class="modal-footer d-flex bd-highlight">
<div class="mr-auto p-2 bd-highlight">
<input class="overflow-x" type="file" (change)="onSelectFile($event)" hidden #browser>
<button type="button" class="btn btn-pri" (click)="browser.click()"><b>BROWSE</b></button>
</div>
<div class="p-2 bd-highlight">
<button type="button" class="btn btn-sec btn-block"
(click)="lgModal.hide()"><b>CANCEL</b></button>
</div>
<div class="p-2 bd-highlight">
<button type="submit" class="btn btn-dark btn-block px-4"
(click)="lgModal.hide()"><b>SAVE</b></button>
</div>
</section>
</form>
</div>
</div>
</article>
Manage to solve it by hooking it up to the lazy-loading component method. But I think that this might just be a workaround. But hey, While waiting for someone else to shine some light, this might just be of help to any of you to pass by.
For how to lazy-load a component. I found this great article by Netanel Basal.
https://netbasal.com/welcome-to-the-ivy-league-lazy-loading-components-in-angular-v9-e76f0ee2854a
Cheers~
I'm creating a webpage of gallery build on ejs and while I'm able to display images properly with .forEach method, when I try to open modal for current image it only works for the first image.
I've tried separating the code - putting .forEach method for images and modal but it brought the same result - same image was on every modal
So here is my EJS:
<%galleryImg.forEach((i) => { %>
<div class="gallery-item">
<%let link = i.url%>
<img class="gallery-img" src="<%= link %>"/>
<div class="img-hover">
<div class="text">
<button data-toggle="modal" data-target="#gallery-modal">See more</button>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg" id="gallery-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-xl" role="document">
<div class="modal-content ">
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-9">
<img class="gallery-img" src="i.urlModall"/>
</div>
<div class="col md-3">
<h4 class="float-center"><strong>Title</strong></h4>
<p>
Lorem ipsum
</p>
<div class="modal-footer justify-content-center">
<button type="button">
<span><i class="fas fa-shopping-basket"></i></span> SHOP
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<%})%>
And also here is the app.js object, where I currently store the source links (with additional links):
const galleryImg = [
{url: "https://i.pinimg.com/originals/4c/94/12/4c9412f545041bf4c9e1642320ff965d.jpg",
urlModal: "https://i.pinimg.com/originals/4c/94/12/4c9412f545041bf4c9e1642320ff965d.jpg",
}
I expect to display the same image on modal as seen on the webpage. Hope you understand me and you can help me with it :)
It's been a long time since I used Bootstrap but if I'm not mistaken your error comes from the modal...you need to pass the corresponding ID.
<button data-toggle="modal" data-target="#gallery-modal SOME_ID">See more</button>
<div class="modal fade bd-example-modal-lg" id="gallery-modal SOME_ID" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
```.
Hi i'am a beginner in angular. I need to display a success message upon sending an email from modal popup and i'm trying to display the same in another popup.How can i display that?? my code part is
<div id="modalViewImportCode" class="modal fade btm-border" role="dialog" style="display:none;" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Email</h4>
</div>
<div class="modal-body" >
<p>Selectemail</p>
<div *ngFor="let primary of email; let i=index;">
<div *ngIf="primary">
<div class="clearfix">
<div class="margin-5-15">
<span class="pull-left modal3-checkbox">
<input type="checkbox" id="txt{{i}}" [(ngModel)]="primary.Current">
<label for="txt{{i}}"></label>
</span>
<span class="modal3-checkbox-label clsWordWrap width85per">{{primary.EmailAddress}}</span>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" (click)="sendMail()" class="btn btn-default">Send Email</button>
</div>
</div>
</div>
I tried something like below by butting below div under above code part
<div id="modalViewImportCodes" *ngIf="mailSent" class="modal fade btm-border" role="dialog" style="display:none;" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Email</h4>
</div>
<div class="modal-body">
<p>Sucess</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
sendMail() function triggers the mail.if success then "mailSent" become true.
thanks in advance.
Hi Jithin,
It very simple don't create new dialog, just use SweetAlerts after
your AJAX request completion these are very simple and easy. Trying
following steps.
Step 1:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
Step 2:
Place in your desired location and change the message;
swal("Good job!", "You clicked the button!", "success");
References:
For more options and guidelines use the following URL:
https://sweetalert.js.org/guides/
Regards
Im trying to load a modal after a 3 second page load delay
The code below opens the modal however i cannot close it and the grey overlay is on top of the content etc
Code below
<script type="text/javascript">
$(document).ready(function(){
setTimeout(function() {
$('#myModal').modal();
}, 3000);
});
</script>
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Join IQ Option Today</h4>
</div>
<div class="modal-body text-center">
<a target="_blank" href="mylink"><img src="myimage.jpg" width="300" height="600" /></a>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Fixed!
My css contained z-index:1
I've commented that out and it now works perfectly!
I have come across one issue for getting an embedded link in modal box so that embed code can be shared to any one to use in their websites.
I have tried to some extent to get the popup when I click a button and open the embed link content in the popup.
But the lines to be shared to the user will be more. So, looking for simple way to acheive it.
`<div class="container">
<h2>Click on the link below</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Reserve Table</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<embed width="800" height="685" src="http://find-out-pro.co/pcktnight/projet1/reservations_website.html?member_id=56&langs=all&place=101" frameborder="0" allowfullscreen="true">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>`
You could try using <iframe> instead of embed
I've made a JSFiddle to show you:
<div class="modal-body">
<iframe id="videoContainer" width="800" height="685" src="http://find-out-pro.co/pcktnight/projet1/reservations_website.html?member_id=56&langs=all&place=101" frameborder="0" allowfullscreen></iframe>
</div>
JSFIDDLE EXAMPLE