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.
Related
I have a boostrap 5.1.3 modal with some content, if the content is biger of 100px for the modal, a scrollbar should appear and go down automatically.
But this does not happen and only works after clicking the scroll down button.
Does anyone know the solution to the problem?
refreshScroll();
const exampleModal = document.getElementById('exampleModal')
if(exampleModal){
exampleModal.addEventListener('show.bs.modal',refreshScroll )
}
var objDiv = document.getElementById("pmbox");
objDiv.scrollTop = objDiv.scrollHeight;
document.querySelector('#pmsend').addEventListener('click', function (e) {
e.preventDefault();
refreshScroll();
});
function refreshScroll(){
var objDiv = document.getElementById("pmbox");
if(objDiv)
objDiv.scrollTop = objDiv.scrollHeight;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<div class="card-body text-dark" id="pmbox" style="position: relative; height: 100px; overflow-y: scroll; verflow-x: hidden;">
<div class="bg-info" style="height: 200px;"> most scroll down auto </div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="pmsend">scroll down</button>
</div>
</div>
</div>
</div>
You can use setTimeout() in order to give an extra time for the modal render to end, and then you can call refreshScroll()
const pmbox = document.getElementById('pmbox')
if (exampleModal) {
exampleModal.addEventListener('show.bs.modal', refreshScroll)
}
var objDiv = document.getElementById('pmbox')
objDiv.scrollTop = objDiv.scrollHeight
document.querySelector('#open').addEventListener('click', function (e) {
e.preventDefault()
setTimeout(() => {
refreshScroll()
}, 200);
})
document.querySelector('#pmsend').addEventListener('click', function (e) {
e.preventDefault()
refreshScroll()
})
function refreshScroll () {
var objDiv = document.getElementById('pmbox')
if (objDiv) objDiv.scrollTop = objDiv.scrollHeight
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<!-- Button trigger modal -->
<button type="button" id="open" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">Launch demo modal</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="card-body text-dark" id="pmbox" style="position: relative; height: 100px; overflow-y: scroll; verflow-x: hidden;">
<div class="bg-info" style="height: 200px;"> most scroll down auto </div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="pmsend">scroll down</button>
</div>
</div>
</div>
</div>
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)
})
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.
This is my button-style anchor tag:
<a id="1" class="data btn btn-primary tag_cnt" style="top:144px; left:510px" onclick="showModal('data'); reply_click();" type="button" value="1">Abc(1).txt</a>
<a id="1" class="data btn btn-primary tag_cnt" style="top:144px; left:510px" onclick="showModal('data'); reply_click();" type="button" value="1">Abc(2).txt</a>
<a id="1" class="data btn btn-primary tag_cnt" style="top:144px; left:510px" onclick="showModal('data'); reply_click();" type="button" value="1">Abc(3).txt</a>
With the script used for Bootstrap modal:
function showModal(data){
reply_click();
function reply_click(){
var idd = event.srcElement.id;
var title = document.getElementById(idd).text;
$("#myModal .modal-title").html(title);
$("#myModal .modal-con").html("paharagraph");
$("#myModal").modal();
}
}
This is a Bootstrap modal:
<div class="modal modal-wide fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<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">Title</h4>
</div>
<div class="modal-body">
<div class="col-md-7 modal-con" style="border: 1px solid grey;">
hello<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div class="col-md-5 modal-cont" style="border: 1px solid grey;">
hello<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I wanted to open different text file with click of different button created with anchor tag in modal-body. What should I do as I have tried all the methods but not getting anything. I want to open a file without using input box in modal-body using JavaScript.
Use ajax for load external file :
click here for demo
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>