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>
Related
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>
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.
i am very much poor in css.in my project i need a popup window.thats why i search on net and found/known about bootstrap modal. and trying to work with it.but i am facing problem. there are a lots of problem in stackoverflow already.but i thing my problems is different.thats why i am asking again?
problem=>
look above the box is appearing.and gone again without my instruction/without dowing anything.
my html=>
<div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Click Me</button></div>
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
and my css=>
<style type="text/css">
.center {
margin-top: 50px;
}
.modal-header {
padding-bottom: 5px;
}
.modal-footer {
padding: 0;
}
.modal-footer .btn-group button {
height: 40px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border: none;
border-right: 1px solid #ddd;
}
.modal-footer .btn-group:last-child > button {
border-right: 0;
}
</style>
and my head section=>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="icon" href="/Content/img/tsms/financial-literacy.gif" sizes="32x32">
<title>
AdminTSMS
</title>
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link href="/Content/css/bootstrap.css" rel="stylesheet"/>
<link href="/Content/css/select2.css" rel="stylesheet"/>
<link href="/Content/css/datepicker3.css" rel="stylesheet"/>
<link href="/Content/css/AdminLTE.css" rel="stylesheet"/>
<link href="/Content/bootstrap-dialog.css" rel="stylesheet"/>
<link href="/Content/css/font-awesome.min.css" rel="stylesheet"/>
<link href="/Content/css/icheck/blue.min.css" rel="stylesheet"/>
<link href="/Content/Custom_Admin.css" rel="stylesheet"/>
<link href="/Content/css/skins/skin-blue.css" rel="stylesheet"/>
<link href="/Content/datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet"/>
<script src="/Content/js/plugins/jquery/jquery-2.2.4.js"></script>
<script src="/Content/js/plugins/bootstrap/bootstrap.js"></script>
<script src="/Content/js/plugins/fastclick/fastclick.js"></script>
<script src="/Content/js/plugins/slimscroll/jquery.slimscroll.js"></script>
<script src="/Content/js/plugins/select2/select2.full.js"></script>
<script src="/Content/js/plugins/moment/moment.js"></script>
<script src="/Content/js/plugins/datepicker/bootstrap-datepicker.js"></script>
<script src="/Content/js/plugins/icheck/icheck.js"></script>
<script src="/Content/js/plugins/inputmask/jquery.inputmask.bundle.js"></script>
<script src="/Content/js/app.js"></script>
<script src="/Content/js/init.js"></script>
<script src="/Scripts/jquery-ui-1.12.1.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script src="/Scripts/bootstrap.js"></script>
<script src="/Scripts/Custom_Login.js"></script>
<script src="/Scripts/MyCustomFile.js"></script>
<script src="/Content/datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="/Content/datetimepicker/js/bootstrap-datetimepicker.fr.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/prettify/r298/run_prettify.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/css/bootstrap-dialog.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap3-dialog/1.34.9/js/bootstrap-dialog.min.js"></script>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
i am working on a project thats why there are lots of unnecessary staff.for better understanding i am giving you my full project head section.because i think the head section/links is one of the reason for the problem.css/bootstrap expert ? please help me.
Please try this:
.center {
margin-top: 50px;
}
.modal-header {
padding-bottom: 5px;
}
.modal-footer {
padding: 0;
}
.modal-footer .btn-group button {
height: 40px;
border-top-left-radius: 0;
border-top-right-radius: 0;
border: none;
border-right: 1px solid #ddd;
}
.modal-footer .btn-group:last-child > button {
border-right: 0;
}
<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.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="center"><button data-toggle="modal" data-target="#squarespaceModal" class="btn btn-primary center-block">Click Me</button></div>
<!-- line modal -->
<div class="modal fade" id="squarespaceModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h3 class="modal-title" id="lineModalLabel">My Modal</h3>
</div>
<div class="modal-body">
<!-- content goes here -->
<form>
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Password</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="form-group">
<label for="exampleInputFile">File input</label>
<input type="file" id="exampleInputFile">
<p class="help-block">Example block-level help text here.</p>
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Check me out
</label>
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
</div>
<div class="modal-footer">
<div class="btn-group btn-group-justified" role="group" aria-label="group button">
<div class="btn-group" role="group">
<button type="button" class="btn btn-default" data-dismiss="modal" role="button">Close</button>
</div>
<div class="btn-group btn-delete hidden" role="group">
<button type="button" id="delImage" class="btn btn-default btn-hover-red" data-dismiss="modal" role="button">Delete</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="saveImage" class="btn btn-default btn-hover-green" data-action="save" role="button">Save</button>
</div>
</div>
</div>
</div>
</div>
</div>
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>
Ok, so I hate to be that guy who posts a homework question, but I have hit the end of my rope.
I need a modal to appeal whenever I click the button.
I've tried:
The data-* way of showing the modal (as seen in the code below)
Showing the modal thru a JS function using $(#mainModal).modal('show')
Commenting out the jQuery version so that it doesn't conflict with Bootstrap's jQuery.
Nothing on the internet seems to work. Would someone mind telling me how to get the modal to show?
Thank you much!
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chatty</title>
<!-- Styles -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<style>
body {
background-color: #333333;
padding-top:50px;
}
h1 {
color: white;
}
body, h1 {
padding-bottom: 50px;
}
.button-spacing {
margin-bottom: 50px;
}
</style>
<script>
</script>
</head>
<body class="container">
<h1 class="text-center">Chatty App</h1>
<button type="button" class="btn btn-success btn-lg button-spacing col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" data-toggle="modal" data-target="#mainModal">Post New Tweet</button>
<!-- Modal -->
<div id="mainModal" 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>
</div>
</body>
</html>
You aren't loading the Javascript file.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<!-- missing this line -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chatty</title>
<!-- Styles -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
background-color: #333333;
padding-top:50px;
}
h1 {
color: white;
}
body, h1 {
padding-bottom: 50px;
}
.button-spacing {
margin-bottom: 50px;
}
</style>
<script>
</script>
</head>
<body class="container">
<h1 class="text-center">Chatty App</h1>
<button type="button" class="btn btn-success btn-lg button-spacing col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2" data-toggle="modal" data-target="#mainModal">Post New Tweet</button>
<!-- Modal -->
<div id="mainModal" 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>
</div>
</body>
</html>