I have four buttons in my page each of them open up the same modal.
All the buttons have the following structure.
<div class="card" data-toggle="modal" data-target="#target-modal">Button -1
<p class="status" style="display: none;"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>
The modal contains a <form> , the elements in the form will slightly differ for each button (change in the no. of elements in the form will be handled at the backend using Laravel).
For now, I'm trying to achieve a functionality as in, when the form is filled and clicked on submit, I would like to identify which button out of the four opened up the modal and make .status to display: block to that button only and close the modal. This process should repeat for all the four buttons.
With the help of show.bs.modal I'm able to identify which button opened the modal. But I would like to know this result on click of submit.
Here is a quick JS fillde to my code.
If anyone could solve this for me, it'll be of great help.
What you can do is that when show.bs.modal event is triggered on the modal, you can retrieve the DOM node of the button that triggered the showing through the event.relatedTarget object. Store this in the modal via the .data() method available in jQuery.
When the form submit event is triggered within the modal, you simply fetch the DOM node from the data object of the modal:
$('#target-modal').on('show.bs.modal', function (e) {
// Store the button that opened the modal
$(this).data('from-button', e.relatedTarget);
});
$('#target-modal form').on('submit', function(e) {
e.preventDefault();
var triggerButton = $('#target-modal').data('from-button');
$(triggerButton).css('font-weight', 'bold');
});
A proof-of-concept example:
$(function() {
$('#target-modal').on('show.bs.modal', function (e) {
// Store the button that opened the modal
$(this).data('from-button', e.relatedTarget);
});
$('#target-modal form').on('submit', function(e) {
e.preventDefault();
var triggerButton = $('#target-modal').data('from-button');
$(triggerButton).css('font-weight', 'bold');
$('#target-modal').modal('hide');
});
});
.card {
width: 150px;
/* Only used to circumvent limitations in StackOverflow's code snippet */
background-color: #4aa !important;
color: #fff;
text-align: center;
padding: 20px;
display: inline-block;
position: relative;
cursor: pointer;
}
.status {
font-size: 24px;
position: absolute;
right: 0;
bottom:-20px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="wrapper">
<div class="card" data-toggle="modal" data-target="#target-modal">Button -1
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>
<div class="card" data-toggle="modal" data-target="#target-modal">Button -2
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>
<div class="card" data-toggle="modal" data-target="#target-modal">Button -3
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>
<div class="card" data-toggle="modal" data-target="#target-modal">Button -4
<p class="status"><i class="fa fa-check" aria-hidden="true"></i></p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-md-12">
<div id="target-modal" class="modal fade" tabindex="-1" role="dialog" >
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-labelledby="myModalLabel" aria-hidden="true" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<form>
<input type="text" name="first_name" placeholder="First Name" required> <input type="text" name="middle_name" placeholder="Middle Name" required>
<input type="text" name="last_name" placeholder="Last Name" required>
<button type="submit" name="Submit" value="">Submit</button>
</form>
</div>
</div>
</div>
</div>
</div><!-- /.modal -->
</div>
</div>
Related
I have a fullscreen modal in my app with an search input. I would like to close this modal when I click outside anywhere other than the input or search button. I use Bootstrap.
How can I do this ?
I try different things and I
Thanks for help
#searchModal {
padding-top: 6rem;
background-color: rgba(179, 179, 179, 0.79);
}
.modal-fullscreen .modal-content {
height: 100%;
border: 0;
border-radius: 0;
}
.bg-transparent {
--bs-bg-opacity: 1;
background-color: transparent !important;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js"></script>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="btn btn-primary search" href="#" data-bs-toggle="modal" data-bs-target="#searchModal">
search
</a>
<div class="modal fade" id="searchModal" data-bs-backdrop="false">
<div class="modal-dialog modal-fullscreen">
<div class="modal-content bg-transparent">
<div class="modal-body container-xxl">
<div class="row justify-content-center align-items-center">
<div class="col col-lg-8">
<form>
<div class="position-relative">
<input type="search" class="form-control fw-light" placeholder="Search…"/>
<button type="submit" class="btn btn-link">
SEARCH
</button>
</div>
</form>
</div>
<div class="col-auto">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" aria-label="Close">
CLOSE
</button>
</div>
</div>
</div>
</div>
</div>
</div>
In my JSP page, I have a modal that shows a page which has another modal (inner modal).
The first modal:
<div class="modal-dialog modal-lg" style="background: white; width: 90% !important">
<input type="hidden" id="report-request-data-id" value="${requestId}"/>
<div class="modal-body">
<div id="reportDataDetailsDiv"></div>
</div>
<div class="modal-footer">
<label class="btn-is float">
<spring:message code='close.label'/>
<input type="button" id="close_report_request_view" class="col-xs-3 col-lg-1 col-md-1" data-dismiss="modal" style="display: none;"/>
</label>
</div>
</div>
The inner modal (loaded in the div with id "reportDataDetailsDiv" above):
<div class="modal-dialog modal-lg" style="background: white;border-radius: 6px;">
<div class="modal-body">
<div class="modal-content">
<div class="col-centered col-lg-12 col-xs-12 ">
.....etc
<div class="modal-footer">
<label class="btn-is float">
<spring:message code='close.label'/>
<input type="button" class="cus-close-modal-btn col-xs-3 col-lg-1 col-md-1" style="display: none;"/>
</label>
</div>
</div>
</div>
</div>
The problem happens when I click the close button in the inner modal. When I do that, both modal gets closed, but I would like the close action to be independent for each modal. How should I correctly do that?
Thank you.
As you are loading other modal inside reportDataDetailsDiv which is inside main-modal you can use .show() show it and whenever close button is clicked you can remove whole div which is added inside reportDataDetailsDiv.
Demo Code :
//suppose other modal is added like below
$(".addmodal").click(function() {
//append modal undr div
$("#reportDataDetailsDiv").html('<div class="modal-dialog modal modal-child" style="background: white;border-radius: 6px;" ><div class="modal-body"><div class="modal-content">Some message to show ....<div class="col-centered col-lg-12 col-xs-12 "><div class="modal-footer"> <label class="btn-is float"><input type="button" class="cus-close-modal-btn " value ="Close" style=""/> </label> </div></div></div></div>')
$(".modal-child").show(); //show that modal
$(this).hide();
$("#close_report_request_view").prop('disabled', true);//disable main modal button
})
//onclick of close button for modal added
$(document).on('click', '.cus-close-modal-btn', function() {
$(this).closest(".modal-child").remove(); //remove whole div
$("#close_report_request_view").prop('disabled', false);//enable main modal buton
});
<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/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
Click to open modal
<div class="modal-dialog modal fade modal" id="myModal" tabindex="-1" role="dialog" aria-hidden="true" style="background: white; width: 90% !important">
<input type="hidden" id="report-request-data-id" value="1" />
<div class="modal-body">
<div id="reportDataDetailsDiv"></div>
</div>
<button class="addmodal btn btn-primary">Click me to open other modal</button>
<div class="modal-footer">
<label class="btn-is float">
Close
<input type="button" id="close_report_request_view" class="col-xs-3 col-lg-1 col-md-1" data-dismiss="modal" style="display: none;"/>
</label>
</div>
</div>
Hii I want to get focus on input textbox when the bootstrap modal popup opens
<div class="modal fade nopading" id="myModalpop" role="dialog">
<div class="model-area">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-head">
<a class="navbar-brand" href="index.html"><img src="~/Content/images/logo.png" alt="Ova" style="float: left; padding-top: 10px;"></a>
<form class="form-inline md-form form-sm mt-0" style="text-align: center;" method="get" action="#Url.Action("Review", "Product")">
<a href"#"><i class="fa fa-search" aria-hidden="true"></i></a>
<input name="id" class="form-contro form-control-sm ml-3 w-75 wow fadeInRight animated" id="txtsearch" type="text" placeholder="Search" aria-label="Search">
</form>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" style="padding: 0px;">
#*<p class="links_p wow fadeInRight animated">QUICK LINKS</p>*#
</div>
</div>
</div>
</div><!-- end navbar-cell -->
I have applied javascript
<script type="text/javascript">
$(document).ready(function () {
$('#myModalpop').on('show.bs.modal', function () {
$('#txtsearch').focus;
//$(this).find('#txtsearch').focus();
});
});
</script>
Focus on textbox
You have two solutions to solve this issue
first one is using setTimeout function to set focus your textbox within 'show.bs.modal' event because this event is fired before model shown as following
$(function () {
$('#myModalpop').on('show.bs.modal', function () {
setTimeout(function(){ $('#txtsearch').focus(); }, 300);
});
});
second solution is using 'shown.bs.modal' event which fired after modal shown but you should remove class fade from you model as following:
$(function () {
$('#myModalpop').on('shown.bs.modal', function () {
$('#txtsearch').focus();
});
});
Called with selected popup id.
$('#myModalpop #txtsearch').focus();
Edit:
<div class="model-area">
'show.bs.modal'
change to
<div class="modal-dialog">
'shown.bs.modal'
Notice model and modal
Did you missed the bracket?
$('#txtsearch').focus();
So i currently have the following code for a twitter bootstrap modal:
<!-- Button trigger modal -->
<button type="button" class="btn btn-success btn-lg btn-block" id="confirm" data-toggle="modal" data-target="#myModal" style="margin: auto; margin-top: 60px; cursor: pointer;">
Confirm
</button>
<!-- Modal -->
<div class="modal" id="myModal" role="dialog">
<div class="modal-dialog modal-dialog-centered w3-animate-bottom" style="max-width: 1000px !important;">
<div class="modal-content" style="border-radius: 10px; padding: 20px;">
<div class="modal-header" style="background-color: white; color: black; text-align: center;">
<h3 style="padding: 8px;"><strong>Confirm Credentials</strong></h3>
<button type="button" class="btn btn-secondary" data-dismiss="modal"><i class="fas fa-times"></i></button>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-5">
<strong>Borrower ID:</strong>
</div>
<div class="col-sm-5">
</div>
<div class="w-100"></div>
</div>
</div>
<div class="modal-footer" style="background-color: white; color: black;">
<div class="text-center" id="footmsg" style="float: left; text-align: left;">
<p>Are you sure you want to submit?</p>
</div>
<span style="width: 20px;"></span>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
<button type="button submit" class="btn btn-success" id="submitter" style="cursor: pointer;">Submit</button>
</div>
</div>
</div>
</div>
and I tried to handle the part where I can launch the modal via the enter key by JQuery. This is the code:
$(document).on('keydown', function(event) {
var key=event.which;
if (key==13) {
$('#confirm').click();
}
});
what it basically does is that it clicks the button that is supposed to launch the supposed modal. So I tried it and it worked the first time. However, when I clicked on the buttons inside the modal that would dismiss the modal, upon trying to press enter again, nothing happens. What should I do?
I have solved it. Apparently, based on https://getbootstrap.com/docs/3.3/javascript/ there is a .modal('show') function that gets things done how I wanted it.
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.