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.
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>
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>
I have this modal and I want it to appear (pop up) automatically when the page finishes its load event.
<div id="myModal" class="modal fade in" tabindex="-1" data-show>
<div class="modal-header" style="background: #5cb85c;">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 id="myModalLabel" style="color: #fff;">HEADER TEXT</h3>
</div>
<div class="modal-body">
<p style="font-size: medium;">SOME TEXT HERE</p>
</div>
<div style="text-align:right; padding-right:15px;">
<button id="buttonEvent" class="btn btn-primary" style="background-
color: #ec9c51; border-color: #ec9c51;" target="_blank">BUTTON TEXT
</button>
</div>
</div>
But I have a problem: I can't use jQuery and I need the Close Button to work properly.
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>
I am using jhuckaby/webcamjs jquery plugin for the webcam.
I am using the Bootstrap modal to load the webcam.
But the Adobe notification is not auto populating in the bootstrap modal.
The Notification image is:
The notification is loading when I am directly loading the camera div without modal
JQuery
var swfURL = '#Url.Content("~/Scripts/jscam.swf")';
$("#Camera").webcam({
width: 320,
height: 240,
mode: "save",
swffile: swfURL,
onLoad: function () {
$("#SubmitPic").on("click", webcam.capture);
},
onTick: function () {
},
onSave: function () {
UploadPic();
},
onCapture: function () {
webcam.save(captureImageSaveURL);
},
debug: function () { },
});
HTML
Modal
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header model-bg">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Take Picture</h4>
</div>
<div class="take-photo">
<div style="border: 4px solid #ccc; padding: 5px">
<div id="Camera" style="height: 240px; width: 100%;"></div>
<div class="col-lg-12">
<center>
<button type="button" class="btn btn-default" style="color:#fff;" id="SubmitPic" name="command" value="Capture" onclick="clickCapture();">
<span class="glyphicon glyphicon-camera"></span>#Resources.VMSResource.Capture
</button>
</center>
</div>
</div>
</div>
</div>
</div>
</div>
Button
<div class="fileUpload btn btn-primary cam-al">
<a href="#" style="color: #fff; text-decoration: none;" data-toggle="modal" data-target="#myModal">
<img src="../Images/cam.png" alt="cam" style="z-index: 9999;">
<span style="color: #fff;">#Resources.VMSResource.TakePhoto</span>
<input type="button" id="Capture" name="command" value="Reset" class="upload">
</a>
</div>
Please assist me in resolving the issue.