I'm trying to change the href of the link in the modal using the id of the clicked link. Though using prop works fine in the console it doesn't seem to work in my snippet. I don't know what i'm doing wrong...
My link:
<a data-toggle="modal" data-target="#myModal" id="1" class="btn btn-danger btn-xs"><i class="fa fa-trash-o"></i> Delete </a>
My script :
$('#myModal').on('show.bs.modal', function(e) {
var $modal = $(this),
myId ='home.php?menu=15&status=delete&id=' + e.relatedTarget.id;
$modal.prop('href',myId);
})
My Modal:
<div class="modal fade" id="myModal" 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">........</h4>
</div>
<div class="modal-body edit-content">
<p><strong>..........</strong></p>
</div>
<div class="modal-footer">
<a href="home.php?menu=15&status=delete&id=5" id="modalLink" class="btn btn-default" >yes</a>
<button type="button" class="btn btn-primary "data-dismiss="modal">no</button>
</div>
</div>
</div>
</div>
Related
I created a modal in HTML, but when i click button, i can't close popup display
enter image description here
code
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-backdrop="true" data-keyboard="false">
Launch demo modal
</button>
<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">
Content
</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>
Try adding z-index for the modal-content
<div class="modal-content" style="z-index:9999">
I do have dynamically generated modals with different Ids in it. I want to know which modal is opened/ shown to the user. I have a solution, If I do know the id of the model as
$('#modelId').on('show.bs.modal', function (event) { // modelId is dynamic
var button = $(event.relatedTarget);
var productid = button.data('target');
console.log(productid)
});
But How to get the modalId when we do not know which modal is triggered by the user?
Attach the event listener to the document instead. Example:
$(document).on('show.bs.modal', function(event) { // modelId is dynamic
var button = $(event.relatedTarget);
var productid = button.data('target');
console.log(productid)
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch exampleModal
</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal2">
Launch exampleModal2
</button>
<!-- 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>
<div class="modal fade" id="exampleModal2" 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 have two modal window in the same page but when I click at the button with the attrib: data-target='#change' the CHANGE MODAL WINDOW don't show it.
I have not experience about js I could be that problem with the code:
<div class="pull-left btn-group">
<button id="changestatus" type="submit" class="btn" data-toggle='modal' data-target='#change'>CANVIAR ESTAT</button>
<button class='btn btn-xs edit btn-addcom' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button>
<div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3>
</div>
<div class="modal-body">
<div class=" text-center">
<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn" style="background-color:YellowGreen; color:white;">ACTIVAT</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:Tomato; color:white;">PENDENT MIQUEL ALIMENTACIÓ</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:SkyBlue; color:white;">PENDENT ADDCOM</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:Gray; color:white;">DESACTIVAT</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h3 class="modal-title text-center" id="Heading">EDITAR REGISTRE</h3>
</div>
</div>
</div>
</div>
/* EDIT MODAL WINDOW */
$('#edit').on('show.bs.modal', function (event) {
var $button = $(event.relatedTarget) // Button that triggered the modal
var row = $button.closest("tr"), // edit button is in the same row as data you want to change
$tds = row.find("td"); // get all table cells in that row
$.each($tds, function(index,value) {
var field = $(this).data("field");
console.log($(this).text());
$('[name="' + field +'"]').val($(this).text()); //input name in the modal window
});
var src_value = $tds.closest("td").find('img').attr('src');
$('[name="imagen"]').attr("src",src_value);
});
/* CHANGE MODAL WINDOW */
$('#change').on('show.bs.modal', function (event) {
alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
});
Help me please?
The button with attribute data-target='#change' will work fine because there's a div with the id change in your page, you've just to comment the alert inside show.bs.modal event because you have an undefined variable $table there.
NOTE : The second button will not work because the data-target attribute refer to #edit element that not exist in your code.
Hope this helps.
$('#edit').on('show.bs.modal', function (event) {
var $button = $(event.relatedTarget) // Button that triggered the modal
var row = $button.closest("tr"), // edit button is in the same row as data you want to change
$tds = row.find("td"); // get all table cells in that row
$.each($tds, function(index,value) {
var field = $(this).data("field");
console.log($(this).text());
$('[name="' + field +'"]').val($(this).text()); //input name in the modal window
});
var src_value = $tds.closest("td").find('img').attr('src');
$('[name="imagen"]').attr("src",src_value);
});
/* CHANGE MODAL WINDOW */
$('#change').on('show.bs.modal', function (event) {
//alert('getSelections: ' + JSON.stringify($table.bootstrapTable('getSelections')));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<div class="pull-left btn-group">
<button id="changestatus" type="submit" class="btn" data-toggle='modal' data-target='#change'>CANVIAR ESTAT</button>
<button class='btn btn-xs edit btn-addcom' data-toggle='modal' data-target='#edit'><i class="material-icons" style="font-size: 20px">edit</i> </button>
<div class="modal fade" id="change" tabindex="-1" role="dialog" aria-labelledby="change" 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"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h4 class="modal-title custom_align" id="Heading">CANVIAR ESTAT</h3>
</div>
<div class="modal-body">
<div class=" text-center">
<div class="btn-group-vertical">
<div class="btn-group">
<button type="button" class="btn" style="background-color:YellowGreen; color:white;">ACTIVAT</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:Tomato; color:white;">PENDENT MIQUEL ALIMENTACIÓ</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:SkyBlue; color:white;">PENDENT ADDCOM</button>
</div>
<div class="btn-group">
<button type="button" class="btn" style="background-color:Gray; color:white;">DESACTIVAT</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="edit" tabindex="-1" role="dialog" aria-labelledby="edit" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"><span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
<h3 class="modal-title text-center" id="Heading">EDITAR REGISTRE</h3>
</div>
</div>
</div>
</div>
I have 2 modals on a page, each modal have different behaviors, one modal is transformed into a page content if the page is bigger than a specified width. To enable that I have used jQuery to hide its modal-backdrop but the problem is that the script will also hide the backdrop for the 2nd modal which has normal behavior. How can I assign a different ID for each modal-backdrop?
HTML
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1">
Launch modal with modal-backdrop id 1
</button>
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2">
Launch modal with modal-backdrop id 2
</button>
<!-- Modal1 modal-backdrop id 1-->
<div class="modal fade" id="myModal1" 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">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
<!-- Modal2 modal-backdrop id 2-->
<div class="modal fade" id="myModal2" 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">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
You can make use of bootstrap modal's .on('show.bs.modal' event to make changes to your backdrop accordingly like one below:
$("#myModal1,#myModal2").on('show.bs.modal', function (e) {
var that=$(this);
var id=that.attr('id'); //get the id of button which got clicked
setTimeout(function(){
$('.modal-backdrop').attr('data-id',id);
//You can either assign it as data-* attribute or add it as class to backdrop like
//$('.modal-backdrop').addClass(id);
});
});
Now accordingly you can use this to make changes according to modal's behavior.
DEMO
This will solve your problem.
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-keyboard="false" data-backdrop="static" >
The requirement-My applicaiton has a button which when clicked a modal is supposed to pop-up where there will contain some data.
Architecture-I want the modal data to be contributed from some another application(some url),through a php file.How can this be done?
What I have tried-In the php file i have placed
<?php echo ' <div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">...</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>
In the html I am using this
<div id="prerequisites-container" class="container-fluid">
<a href="http://localhost/Experiment/main/prereq.php"
data-toggle="modal" data-target="#myModal" class="btn btn-default">
Launch Modal </a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"></div>
</div>
Place your HTML code, as follows:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true"></div>
inside your Echo.
<?php echo ' HERE <div class="modal-dialog">
UPDATED:
<div id="prerequisites-container" class="container-fluid">
Launch Modal
</div>
<?php echo '<div class="modal fade" id="trymodalbootstrap" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"></div>
<div class="modal-dialog">
<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">Modal title</h4>
</div>
<div class="modal-body">...</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>'; ?>
place the modal html in your html, and fetch modal content data dynamically through ajax call from server. and add that data to modal before displaying