I am trying to achieve the following:
I have a button :
<button id= "<dynamicid>" type="button" class="btn btn-danger btn-sm pull-right" data-toggle="modal" data-target="#mymodal">Open</button>
The id attribute changes everytime. Now clicking this button opens up a modal. What I am trying to achieve is get this dynamic id into the modal which opens up.
Here is the full modal:
<div class="modal fade" id="mymodal" data-placement="right" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding: 4%; background-color: white; color: #6A6A6A; font-family: 'Crete Round', serif;">
<input type="submit" class="btn btn-primary btn-sm" value="submit"/>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
Any suggestions on this would be of great help.
As you didn't got really specific on what you want to do with the ID here an example on how it could be done:
$('#mymodal').on('show.bs.modal', function(e) {
$(this).find('.modal-body').text(e.relatedTarget.id);
});
Example
Reference:
bootstrap - modal events
$('#mymodal').on('show.bs.modal', function(e) {
var id = $(this).find('.modal-body').text(e.relatedTarget.id);
if(id) console.log(id);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<button id="whateverID" type="button" class="btn btn-danger btn-sm pull-right" data-toggle="modal" data-target="#mymodal">Open</button>
<div class="modal fade" id="mymodal" data-placement="right" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header" style="padding: 4%; background-color: white; color: #6A6A6A; font-family: 'Crete Round', serif;">
Header
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
Related
I want to display modal on button click. I've followed bootstrap documentation, but for some reason the modal isn't popping up.Here is my code:
Modal:
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal"> View Details</button>
Jquery:
$(document).ready(function(){
$('button.btn-view-details').on('click', function () {
$('#commonModal').modal('show');
})
})
On your button, you can add data-target attribute and you don't need to trigger the popup via jQuery:
<button type="button" class="btn btn-secondary btn-view-details"
data-toggle="modal" data-target="#commonModal"> View Details</button>
You need to add just bootstrap cdns
$(document).ready(function() {
$('button.btn-view-details').on('click', function() {
$('#commonModal').modal('show');
})
})
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
</button>
</div>
<div class="modal-body">
<p>.............</p>
</div>
<div class="modal-footer">
..........
</div>
</div>
</div>
</div>
Button:
<button type="button" class="btn btn-secondary btn-view-details" data-toggle="modal"> View Details</button>
I use the fullcalendar.js with Bootstrap 4 modal.
I have bootstrap4 button when I click on it a modal show up with fullcalendar component.
But when It loads for the first time I get this:
But when I click on the button the next/prev button it works fine
So how I can fix that.
HTML code
<body>
<div id="content">
<button id="btn-calendar" type="button" class="btn btn-dark" data-toggle="modal" data-target="#modal-calendar"><i class="fas fa-calendar-alt"></i></button>
<div class="modal fade" id="modal-calendar" tabindex="-1" role="dialog" aria-labelledby="modal-calendar-title" 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="modal-calendar-title">Calendar</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="calendar"></div>
</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>
<!-- script tags -->
</body>
CSS code:
* {
margin: 0;
padding: 0;
}
html,
body,
#content {
width: 100%;
height: 100%;
}
#btn-calendar {
margin: 10px;
}
It works if I create the object after the modal is open for the first time.
//app.js
$(function() {
var render = () => {
console.log('render after modal is open');
$('#calendar').fullCalendar({
// setup
})
$('.modal').unbind('shown.bs.modal', render)
}
$('.modal').on('shown.bs.modal', render)
})
How to when I click to open modal show the modal content. i click to anchor close the modal and srcoll to anchor id.
#Content {
height: 400px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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">
The Content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="Content">
The Content
</div>
Any idea for help me. Thanks!
You need to hide the modal, wait for the animation to complete, and then scroll to the item.
You can optionally animate the scroll with $('html,body').animate({scrollTop: $('#Content').offset().top)});
function onContentClick(e) {
e.preventDefault();
$('#myModal').one('hidden.bs.modal', () =>
window.scrollTo(0, $('#Content').offset().top));
$('#myModal').modal('hide');
}
#Content {
height: 400px;
margin-top: 1000px;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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">
The Content
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div id="Content">
The Content
</div>
I'm using squarespaceModal from this site
I would like to know if is it possible to pass the id to the code of the modal ?
This is the button who's calling the modal :
<div class="center">
<button id="<?php echo $i; ?>" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">
update
</button>
</div>
This is the first line of the modal :
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
That is just a standard Bootstrap Modal I dont see anything special about it. Therefore you have all the events you would like from the modal.
So you "could" write an event to trap everytime a modal is opened.
$(function() {
$('#myModal').on('shown.bs.modal', function() {
alert($(this).attr('id'))
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet"/>
<button id="myButton" data-target="#myModal" data-toggle="modal" class="btn btn-primary">Open</button>
<div class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel" id="myModal">
<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="gridSystemModalLabel">Modal title</h4>
</div>
<div class="modal-body">
This is my 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><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
On your button click set the require value into your input fields of modal and then show modal using below code.
$(".update_pro").click(function () {
$('#txtYourTexbBoxWithinModal').val($(this).data('id')); // or something eslse.
$('#squarespaceModal').modal('show');
});
If come across issue of displaying modal then remove
data-target="#squarespaceModal"
Cheeerssss
Here you go with a solution https://jsfiddle.net/32jsq6aL/
$('button[data-toggle="modal"]').click(function(){
$($(this).data('target')).attr('btn-id', $(this).attr('id'));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="center">
<button id="test 1" data-toggle="modal" data-target="#squarespaceModal" class="update_pro btn btn-primary center-block">update</button>
</div>
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
</div>
OnClick on the button, get the data-target and attach an attribute btn-id as button id to the targeted modal.
Hope this will help you.
The modal is defined as:
<div class="moremodal" style="display:none;">
<div class="modal-dialog modal-lg" style="width: 500px; border: outset; position: fixed; top: 25%; left: 35%;">
<div class="modal-content" style="top:0px;"></div>
</div>
Whenever someone clicks outside the modal, I have disabled the clicks so that the person is forced to choose any options from the modal before proceeding. (This does not work properly for some reason.)
$("*:not('.moremodal')").on("click",function(){
return false;
})
But i want to re-enable clicks on the page after the modal is closed. How do I do that? And where should I call that function or write that code?
EDIT:
There is only one modal which I populate.
Here two bootstrap modal.
1) Close when click on outside of modal.
2) Not close when click on outside of modal.
Hope it will help you.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Default Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1" data-backdrop="static" data-keyboard="false" >Disabled outside click modal</button>
<!-- Modal -->
<div id="myModal1" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<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">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Use bootstrap modal and add this code you can entirely achieve your goal.
Hope this will helps you.
$(document).ready(function() {
$("#popup").modal({
show: false,
backdrop: 'static'
});
$("#click-me").click(function() {
$("#popup").modal("show");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.css" rel="stylesheet"/>
<script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<div class="modal" id="popup" style="display: none;">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Title</h3>
</div>
<div class="modal-body">
**Your HTML goes here**
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<a id="click-me" class="btn btn-primary">Open</a>
</body>
<script type="text/javascript" src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.1.0/js/bootstrap.min.js"></script>
</html>
Use CSS property "pointer-event: none;" on modal overlay.
Firstly change your selector into something like this (assign an id to the model for ease of selection):
$('body').click(function(evt){
//all elements except the modal and elements in the modal
if(evt.target.id == "modal_id" || $(evt.target).closest("#modal_id").length > 0) {
//if the modal is visible do nothing
if($("#modal_id").is(":visible")) {
return false;
}
}
});
EDIT
If you are dealing with multiple modals and need to use the class selector:
$('body').click(function(evt){
//all elements except the modal and elements in the modal
if($(evt.target).hasClass("moremodal") || $(evt.target).closest(".moremodal").length > 0) {
//if there is a visible model do nothing
if($(".moremodal").is(":visible")) {
return false;
}
}
});
Simply you can use this
<a data-controls-modal="id" data-backdrop="static" data-keyboard="false" href="#">
<head>
<style>
.modal-container {
width: 100%;
height: 100%;
background-color: rgba(255,255,255,0.8);
display: inline-block;
position: absolute;
top: 0;
left 0;
z-index: 100;
}
.modal-content {
margin: 10%;
backgrond-color: rgba(0,0,0,1);
display: inline-block;
width: 80%;
height: 80%;
}
.hidden {
display: none;
}
</style>
</head>
<body>
<div> my normal content </div>
<div>
<button type="button" id="open-modal">open the modal</button>
</div>
<div class="modal-container hidden">
<div class="modal-content">
Here is your modal content
<div>
<button type="button" id="close-modal">close</button>
</div>
<div>
</div>
<script src="path/to/jquery/libraries/jquery.min.js"></script>
<script>
$(document).ready(() => {
$('.modal-container').on('click', function(event){
// stop bubbling on clicks
event.preventDefault();
event.stopPropagination();
});
$('#open-modal').on('click', function(){
// show the modal
$('.modal-container').removeClass('hidden');
// disable body scrolling in the background
$('body').css('overflow-x', 'hidden').css('overflow-y', 'hidden');
})
$('#close-modal').on('click', function(event){
$('.modal-container').addClass('hidden');
$('body').css('overflow-x', 'auto').css('overflow-y', 'auto');
}
});
</script>
</body>
i think this logical code shows you how it can work. i've not tested it so i think the css part is not 100% correct.