I have following modal dialog coding,but when i click [X],the dialog doesn't closed. I invoke the dialog from button and the JavaScript function as follow;
$('#apply_Compensation_Leave').show();
Modal code
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><li class="fa fa-times"/></button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Did i miss anything?
Adding Javascript file..all javascript functions in seperate .js file.
EmpcompensationAdapter.method('getActionButtonsHtml', function(id,data) {
var html = "";
html = '<div style="width:80px;"><img class="tableActionButton" src="BASE_URL/apply.png" style="cursor:pointer;" rel="tooltip" title="Apply Leave" onclick="modJs.applyleaves();return false;"></img></div>';
return html;
});
EmpcompensationAdapter.method('applyleaves', function() {
$('#apply_Compensation_Leave').show();
});
EmpcompensationAdapter.method('showLeaveView', function() {
$('#apply_Compensation_Leave').hide();
});
When i click Back button, by calling the function showLeaveView();
Apart from adding $('#apply_Compensation_Leave').modal('show');, you need to change your HTML also. <li> tag should not be put without <ul>. It's not valid markup at all. Try putting × in your button HTML.
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
Here is a Demo
Or you can provide valid markup like this <ul><li class="fa fa-times"></li></ul>
Here is a Demo with the valid markup.
The bootstrap Modal is invoked by $('#apply_Compensation_Leave').modal('show');
Try this demo.
You are opening your modal using JS.
You can use this.But this has wrong markup as #Alorika Mentioned
<div class="modal" id="apply_Compensation_Leave" tabindex="-1" role="dialog" aria-labelledby="messageModelLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
</button>
<h3 style="font-size: 17px;">Apply Leave</h3>
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
JavaScript
$('#apply_Compensation_Leave').show();
Try this layout :
<div class="modal fade bs-example-modal-sm" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel"> <center>Title here </center> </h4>
</div>
<div class="modal-body">
...Body here...
</div>
<div class="modal-footer">
<button type="button" id="Okbtn" class="btn btn-danger" data-dismiss="modal"> CANCEL</button>
</div>
</div>
</div>
</div>
Related
Unable to close bootstrap modal using javascript in Chrome. Same code works in firefox. Here is my modal
<div class="modal hide fade" id="reportModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="reportTitle"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="reportMsg"></div><br>
<div id="reportProgress" class="progress">
<div class="progress-bar progress-bar-striped" style="min-width: 25px;"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" id="createReport" class="btn btn-primary">Create Report</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And here are all the different things I have tried to close it:
$('#reportModal').modal('hide');
$('#reportModal').modal('toggle');
$('.modal.in').modal('hide')
$(".close").trigger("click");
All of them work in Firefox but none of them in Chrome. There are no errors in the console. Any ideas on how I can get this Modal to close?
I'm using Bootstrap-Native, I want to detect when a modal is closed, is there a way to do this with plain javascript?
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
I tried:
document.getElementById("exampleModal").addEventListener("transitionend", console.log("closed"));
But event doesn't fire.
This question can be found repeated here: Bind a function to Twitter Bootstrap Modal Close.
See the answer:
var myModalEl = document.getElementById('myModalID');
myModalEl.addEventListener('hidden.bs.modal', function (event) {
// do something...
});
I've got a serious issue with modal from Bootstrap.
When I open a modal box in my website, there's absolutly no problem (the modal-open class is correctly added on the body) the modal is correct, shade ok and content clear :
<button type="button" data-toggle="modal" data-target="#Modal_GA">buttonOpenMe</button>
When I close it manualy, it's ok too :
<button type="button" class="close2" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span><p class="TxtClose">CLOSE</p>
In my first modal, I've got two others buttons to check my previous & next projects (my website is a one-page).
And this is what i want to do :
action 1) open modal#1
action 2) scroll & click on next project
action 3) close modal#1
action 4) open modal#2, etc...
<button type="button" data-dismiss="modal" data-toggle="modal" data-target="#Modal_Animations">
CloseThis
</button>
My body had an added class called "modal-open" when a modal box is opened. But when I'm already in the first modal & I want to go into the second project (modal#2), he appears but my scroll is locked and my body lost his "modal-open" class.
I think data-dismiss="modal" clear everything. But when I add manually (with inspector) the class "modal-open" on my body when the second modal is opened, everything works.
So I tried to fix this with a lot a solution from forum post & nothing really works.
I think I had to look for this type of snippets for adding the class on the body automatically, something like that :
$(document)
.on('show.bs.modal', '.modal', function () {
$(document.body).addClass('modal-open')
})
.on('hidden.bs.modal', '.modal', function () {
$(document.body).removeClass('modal-open')
})
But actually, everything failed, obviously!
How can I fix this?
If you want to take a look to my online test version: http://bg-portfolio.com/bg_test/index.php , scroll and click on the first project "Gamers Assembly 2017", then scroll and click on "Projet suivant" (next project). The bug will appear!
PS: I'm working with Bootstrap v3.3.7 (and when I paste news files, everything is broken, so for this website, I just want to stay under this version for now)
Maybe could be more convenient, change a little bit the way as you show/hide your modals for each next/previous portfolio item.
<button type="button" class="close2" data-actual="#Modal_GA" data-target="#Modal_Animations">
<span aria-hidden="true">></span><p class="TxtClose">PROJET SUIVANT</p>
</button>
Then you can use only 1 simple jquery function:
$('.close2').click(function() {
var actualModal = $(this).attr('data-actual');
var newModal = $(this).attr('data-target');
$(actualModal).modal('hide');
$(newModal).modal('show');
});
Note that you don't need any more create a script for each portfolio item, in this way you will save time load and resource for the JS in the browser.
You've added the event listeners twice:
When I view source I can see the following on lines 583 and 1046:
$(document)
.on('show.bs.modal', '.modal', function () {
$(document.body).addClass('modal-open')
})
.on('hidden.bs.modal', '.modal', function () {
$(document.body).removeClass('modal-open')
})
I quickly removed one of the event listeners in Chromes Inspect Tool.
Right click the button in the modal you mentioned > Inspect > Event Listeners > click > then delete one of the div#Modal_GA,modal.fade.in event listeners. The next modal now scrolled correctly for me.
I assume, therefore, that by removing one of the two duplicated blocks, you will remove this second listener, which is basically firing twice and messing up your second modal...
<h1>Bootstrap 4x multiple modals in one page</h1>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg1">Large modal1</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg2">Large modal2</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg3">Large modal3</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg4">Large modal4</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg5">Large modal5</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg6">Large modal6</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg7">Large modal7</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg8">Large modal8</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg9">Large modal9</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg10">Large modal10</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg1" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal1</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg2" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal2</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg3" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal3</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg4" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal4</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg5" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal5</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg6" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal6</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg7" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal7</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg8" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal8</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg9" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal9</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
<div class="modal fade bd-example-modal-lg10" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel1"
aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title" id="myLargeModalLabel">Large modal10</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
</div>
</div>
</div>
The modal-open class gets removed after the modal has finished animating closed, but added by the other modal just as it opens. Unfortunately these animations overlap. This means that the modal-open class is added by the opening modal and then quickly removed by the closing modal (as I understand it).
Hooking into the late events of the modal (specifically shown.bs.modal, which is fired when the opening animation ends) should help you here: https://getbootstrap.com/docs/4.0/components/modal/#events
$( '#modal1' ).on( 'shown.bs.modal', function(){
document.body.classList.add( 'modal-open' );
});
$( '#modal2' ).on( 'shown.bs.modal', function(){
document.body.classList.add( 'modal-open' );
});
Tested and working over here
I'm using Bootstrap to launch a selection modal, then a form modal and finally a confirmation modal after user's click send.
This works fine the very first time, however after that, confirmation modal does not pop up, and it just simply exits.
Here's my code:
HTML:
<button type="button" class="btn" data-toggle="modal" data-target="#chooseModal">Open</button>
<!-- Select One Modal -->
<div class="modal fade" id="chooseModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="myModalLabel">Select An Option</h2>
</div>
<div class="modal-body">
<button type="button" class="btn" data-toggle="modal" data-target="#myForm">Click to Email</button>
<button type="button" class="btn" data-toggle="modal" data-target="#chooseModal">Click to Do Something Else</button>
</div>
</div>
</div>
</div>
<!-- Email Form Modal-->
<div class="modal fade" id="myForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Email</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12" id="emailInput">
<h4>To:</h4>
<input type="text" name="email" id="email">
</div>
<div class="col-xs-12">
<h4>Subject:</h4>
<input type="text" value="subject" name="emailSubject" id="emailSubject">
</div>
<div class="col-xs-12">
<h4>Body:</h4>
<textarea rows="4" id="emailBody"></textarea>
</div>
<div class="col-xs-1">
<button onclick="confirmAlert()" type="button" class="btn" data-toggle="modal" data-target="#myForm">Send</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Confirmation Modal -->
<div class="modal fade" id="PDFconfirmation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="myModalLabel">Thank You!</h2>
</div>
<div class="modal-body">
<h2>Your message has been sent.</h2>
</div>
</div>
</div>
</div>
Javascript:
function confirmAlert(){
$(".modal, .modal-backdrop").hide();
$('#PDFconfirmation').modal('show');
setTimeout(function(){
$("#PDFconfirmation, .modal, .modal-backdrop").hide();
}, 2000);
}
You should change your JS code to this:
function confirmAlert(){
$("#chooseModal").modal('hide');
$('#PDFconfirmation').modal('show');
setTimeout(function(){
$("#PDFconfirmation").modal('hide');
}, 2000);
}
However, you can improve this code but now you have a better idea how you should toggle (show/hide) modals to prevent this sort of bugs.
Here is the snippet,
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<button type="button" class="btn" data-toggle="modal" data-target="#myForm">Open</button>
<!-- PDF Share Form Modal-->
<div class="modal fade" id="myForm" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Email</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-xs-12" id="emailInput">
<h4>To:</h4>
<input type="text" name="email" id="email">
</div>
<div class="col-xs-12">
<h4>Subject:</h4>
<input type="text" value="subject" name="emailSubject" id="emailSubject">
</div>
<div class="col-xs-12">
<h4>Body:</h4>
<textarea rows="4" id="emailBody"></textarea>
</div>
<div class="col-xs-1">
<button type="button" class="btn" data-toggle="modal" data-target="#PDFconfirmation">Send</button>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Confirmation Modal -->
<div class="modal fade" id="PDFconfirmation" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h2 class="modal-title" id="myModalLabel">Thank You!</h2>
</div>
<div class="modal-body">
<h2>Your message has been sent.</h2>
</div>
</div>
</div>
</div>
I am creating spans in a jinja2 loop, when the user click on them, a modal should appear with a dynamic content . The dynamic item more specifically is the image of the map inside each modal :
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
To avoid one static modal that will repeat itself within the loop, I added a dynamic id to the modal dialog :
<div class="modal-dialog" id="{{id}}" >
But it seems that this doesn't work . Here is my code :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
If your are in a loop, you must use different modal id, try :
<span style="cursor: pointer;" type="button" class="badge badge-white" data-toggle="modal" data-target="#myModal{{id}}">Map</span>
<!-- Modal -->
<div class="modal fade" id="myModal{{id}}" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" id="{{id}}" >
<div class="modal-content" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Lorem ipsum<small>Lorem ipsum</small></h4>
</div>
<div class="modal-body text-center pagination-centered">
<img src="http://maps.googleapis.com/maps/api/staticmap?markers=color:red%7Clabel:S%7C{{item.venue.latitude}},{{item.venue.longitude}}&zoom=17&size=400x400&sensor=false"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<!--<button type="button" class="btn btn-primary">Save changes</button>-->
</div>
</div>
</div>
</div>
I think i figured this out.Don't keep id as a number but add some random text in front. e.g; id="#modal{{ id }}".
I was also caught in this problem and this solved it. I just made a check by console logging the element with id='{{ id }}' and it was showing error on the console but when i added some text like id='modal{{ id }}', it worked perfectly.
If Anyone is still looking for a solution then try the following code (Note: I have done it in PHP as you can see php block there in code.) this it will work for sure
<?php
$id=0;//define on the top of your function
foreach()
<button type="button" class="btn-link" data-toggle="modal" data-target="#myModal<?php echo $id;?>">Read More</button></div>
<div id="myModal<?php echo $id;?>" class="modal fade" role="dialog">
<div class="modal-dialog"> <!-- Modal content-->
<div class="modal-content">
//Popup content
</div>
</div>
</div>
$id=$id+;//increase id value by for next iteration?>
endforech;