We Keep Coding

Signature Pad not detecting any click and not drawing as a result

I am fairly new to angularjs and am trying to integrate signature_pad library by szimek into my application. Basically I have a bootstrap tab in place for different methods to accept user's signature. One is just typing the name in the input field in the first tab, the second is drawing the signature in the second tab (this is where this library comes into picture) and the third is uploading an image.
These tabs are inside a modal as shown below:
Draw tab in the modal
I have taken reference from the demo in the documentation, Demo and you'll find 90% of the code is copied from the demo only, right from the HTML to Js and CSS.
Now the issue is that first of all, my canvas is not getting an height and width properly even though the resize function is called. The offsetWidth and offsetHeight is always 0 and thus the canvas doesn't get proper height and width. Now even if I comment out the resizeCanvas function and hard-code the height and width for the canvas, the canvas gets the dimensions but fails to draw anything on it i.e. the points are not registered on clicking.
Here's my JS code:
$scope.showSignaturePopup = (documentData) => {
$("#signaturePopup").modal("show");
$scope.signatureName = '';
$scope.signatureFont = '';
$scope.documentData = documentData;
$scope.documentPreviewEnabled = true;
$scope.wrapper = document.getElementById("signature-pad");
$scope.canvas = $scope.wrapper.querySelector("canvas");
$scope.signaturePad = new SignaturePad($scope.canvas, {
// It's Necessary to use an opaque color when saving image as JPEG;
// this option can be omitted if only saving as PNG or SVG
backgroundColor: 'rgb(255, 255, 255)'
});
// console.log('$scope.signaturePad, $scope.canvas -------> ', $scope.signaturePad, $scope.canvas);
window.onresize = $scope.resizeCanvas;
$scope.resizeCanvas();
}
$scope.resizeCanvas = () => {
$scope.ratio = Math.max(window.devicePixelRatio || 1, 1);
$scope.canvas.width = $scope.canvas.offsetWidth * $scope.ratio;
$scope.canvas.height = $scope.canvas.offsetHeight * $scope.ratio;
$scope.canvas.getContext("2d").scale($scope.ratio, $scope.ratio);
console.log('$scope.canvas.width, $scope.canvas.height -------> ', $scope.canvas.width, $scope.canvas.height);
console.log('$scope.canvas.offsetWidth, $scope.canvas.offsetHeight -------> ', $scope.canvas.offsetWidth, $scope.canvas.offsetHeight);
console.log('$scope.ratio -------> ', $scope.ratio);
$scope.signaturePad.clear();
console.log('$scope.signaturePad, $scope.canvas -------> ', $scope.signaturePad, $scope.canvas);
}
$scope.saveSign = () => {
console.log('signaturePad.toDataURL() -------> ', $scope.signaturePad.toDataURL());
}
Here's my HTML code
<div id="signaturePopup" class="modal erpModal fade" role="dialog" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog">
<!-- Modal content-->
<form name="signForm" class="erpForm" ng-submit="" novalidate>
<div class="modal-content">
<div class="modal-header greyBg">
<button type="button" class="close" ng-click="" data-dismiss="modal">×</button>
<h4 class="modal-title" style="font-weight: bold;">Sign Document</h4>
</div>
<div class="modal-body longModal">
<!-- Signature Acceptance section -->
<div class="padd15">
<ul class="signatureTabs nav nav-tabs">
<li class="active"><a class="signatureTab" data-toggle="tab" data-target="#typeSign" role="tab" data-toggle="tab">Type</a></li>
<li><a class="signatureTab" data-toggle="tab" data-target="#drawSign" role="tab" data-toggle="tab">Draw</a></li>
<li><a class="signatureTab" data-toggle="tab" data-target="#menu2" role="tab" data-toggle="tab">Upload</a></li>
</ul>
<div class="tab-content">
<div id="typeSign" class="tab-pane fade in active">
<div class="marTop20 marBottom20 f-15">Create your signature by typing your full name.</div>
<div id="signatureNameContainer">
<input type="text" ng-model="signatureName" class="erpInput">
</div>
</div>
<div id="drawSign" class="tab-pane fade">
<h3>Menu 1</h3>
<div id="signature-pad" class="signature-pad">
<div class="signature-pad--body">
<canvas></canvas>
</div>
<div class="signature-pad--footer">
<div class="description">Sign above</div>
<div class="signature-pad--actions">
<div>
<button type="button" class="button clear" data-action="clear">Clear</button>
<button type="button" class="button" data-action="change-color">Change color</button>
<button type="button" class="button" data-action="undo">Undo</button>
</div>
<div>
<button type="button" class="button save" data-action="save-png" ng-click="saveSign()">Save as PNG</button>
</div>
</div>
</div>
</div>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="reset" class="btn btn-default greyBtn custBtn" data-dismiss="modal" ng-click="">Cancel</button>
<button type="submit" class="btn btn-default yellowBtn custBtn" ng-click="">Submit</button>
<button type="submit" class="btn btn-default yellowBtn custBtn" ng-click="documentPreviewEnabled = false">Add Signature</button>
</div>
</div>
</form>
</div>
</div>
Here's my CSS:
.signature-pad {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
font-size: 10px;
width: 100%;
height: 100%;
max-width: 700px;
max-height: 460px;
border: 1px solid #e8e8e8;
background-color: #fff;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
border-radius: 4px;
padding: 16px;
}
.signature-pad::before,
.signature-pad::after {
position: absolute;
z-index: -1;
content: "";
width: 40%;
height: 10px;
bottom: 10px;
background: transparent;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}
.signature-pad::before {
left: 20px;
-webkit-transform: skew(-3deg) rotate(-3deg);
transform: skew(-3deg) rotate(-3deg);
}
.signature-pad::after {
right: 20px;
-webkit-transform: skew(3deg) rotate(3deg);
transform: skew(3deg) rotate(3deg);
}
.signature-pad--body {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
border: 1px solid #f4f4f4;
}
.signature-pad--body
canvas {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 4px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}
.signature-pad--footer {
color: #C3C3C3;
text-align: center;
font-size: 1.2em;
margin-top: 8px;
}
.signature-pad--actions {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
margin-top: 8px;
}
I also tried creating a JS fiddle but I don't know how to for an angularjs application. Here's the link - JSFiddle. This doesn't work.
Please help guys. Hope you help out a noobie.

HTML2Canvas capture modal

I have this code below which consists of a HTML tab and a button which opens my modal. The problem is that i am using the library HTML2canvas and i am trying to capture my HTML tab with the modal below it, i have put my modal code inside my capture div but it doesn't appear in the picture when i download it.
Is what i'm trying to do possible to accomplish? Any help would be greatly appreciated thanks.
function sendData() {
html2canvas(document.getElementById('capture'), {
allowTaint: false,
useCORS: true
}).then(function(canvas) {
$('#test').attr('href', canvas.toDataURL('image/png'));
$('#test').attr('download', 'Test.png');
$('#test')[0].click();
});
}
function openCity(evt, cityName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablinks");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
document.getElementById(cityName).style.display = "block";
evt.currentTarget.className += " active";
}
document.getElementById("defaultOpen").click();
body {
font-family: Arial;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
margin-top: 10px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
font-size: 17px;
border-bottom: 8px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 25px;
border: 1px solid #ccc;
border-top: none;
-webkit-animation: fadeEffect 1s;
animation: fadeEffect 1s;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
background-color: white;
}
.jobs-panel {
display: table;
max-height: 100%;
width: 85%;
background-color: #b7bcbe;
margin-left: auto;
margin-right: auto;
margin-top: 25px;
margin-bottom: 25px;
padding-bottom: 20px;
padding-top: 20px;
}
.tabwidth {
width: 85%;
margin: 0 auto;
}
<!DOCTYPE html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<html>
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="//#" />
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
<script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>
</head>
<body>
<div id="capture">
<div class="jobs-panel">
<button class="modal-button" data-toggle="modal" data-target="#myModal2">MODAL BUTTON</button>
<div class="tabwidth">
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'Pikachu')" id="defaultOpen">Pikachu</button>
</div>
<div id="Pikachu" class="tabcontent">
<img src="https://s22.postimg.cc/l2txqenox/Pikachu.png" width="300" height="300" crossorigin>
</div>
<div id="Paris" class="tabcontent">
<h3>Paris</h3>
<p>Paris is the capital of France.</p>
</div>
<div id="Tokyo" class="tabcontent">
<h3>Tokyo</h3>
<p>Tokyo is the capital of Japan.</p>
</div>
</div>
</div>
<div class="modal fade" id="myModal2" role="dialog">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h2 class="modal-title center">FAQ</h2>
</div>
<div class="modal-body">
<div class="central">
<h3 class="bold-text ">QUESTIONS
</h3>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<button id="match-button" onclick="sendData();">capture</button>
<a id="test" href="#"></a>
</body>
</html>

I am adding a helper function for downloading image in this way:
`https://codepen.io/anon/pen/PBGaMP`
Here is the link where i found the downloadCanvas function code:
https://jsfiddle.net/AbdiasSoftware/7PRNN/
Greetings, hope it helps.

Use,
import { useScreenshot } from 'use-react-screenshot'
instead to capture the image of component.
Working fine in react.

Opening modal from function in pure javascript

I want to open a modal with a function in pure javascript (not jquery).
Component from where i am calling function:
<div class="col-sm-5 offset-sm-5"
style={{ bottom: "60px", marginBottom: "20px", marginTop: "23px" }}>
<button class="btn btn-primary btn-sm" onClick={this.handleSubmit.bind(this)}>Save</button>
</div>
Function code:
handleSubmit=()=>{
document.getElementById('exchangehouse').style.display = "block"
}
Modal code:
<div class="modal fade" id="exchangehouse" tabindex="-1" role="dialog"
aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</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>
Thanks

Are you searching for this?
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Your Contents</p>
</div>
</div>

Here is a modern, pure ES6 implementation of a modal window.
I also included some simple open/close hooks.
class ModalWindow {
constructor(options) {
this.opts = Object.assign({}, ModalWindow._defaultOptions, options)
this.modal = document.querySelector(this.opts.selector)
this.initialize()
this.addEventHandlers()
this.afterRender()
}
initialize() {
if (this.opts.headerText) {
this.query('.md-dialog-header-text').textContent = this.opts.headerText
}
if (this.opts.htmlContent) {
this.query('.md-dialog-content').innerHTML = this.opts.htmlContent
} else if (this.opts.textContent) {
this.query('.md-dialog-content').textContent = this.opts.textContent
}
if (this.opts.theme) {
this.modal.classList.add(`md-theme-${this.opts.theme}`)
}
}
addEventHandlers() {
this.query('.md-dialog-header-close-btn').addEventListener('click', (e) => {
this.setVisible(false)
})
if (this.opts.mode !== 'modal') {
this.modal.addEventListener('click', (e) => {
if (e.target === this.modal) {
this.setVisible(false)
}
})
}
}
afterRender() {
if (this.opts.show === true) {
this.setVisible(true);
}
}
setVisible(visible) {
this.modal.classList.toggle('md-dialog-visible', visible)
if (visible) {
this.onOpen() // class method override or callback (below)
if (typeof this.opts.onOpen === 'function') {
this.opts.onOpen(this.modal)
}
} else {
this.onClose() // class method override or callback (below)
if (typeof this.opts.onClose === 'function') {
this.opts.onClose(this.modal)
}
}
}
query(childSelector) {
return this.modal.querySelector(childSelector)
}
// Example hooks
onOpen() { }
onClose() { }
}
ModalWindow._defaultOptions = {
selector: '.md-dialog',
show: false,
mode: 'modal'
}
class MyCustomModalWindow extends ModalWindow {
constructor(options) {
super(options)
}
onOpen() {
console.log('Opened!') // or you can use options.onOpen
}
onClose() {
console.log('Closed!') // or you can use options.onClose
}
}
let modal = new MyCustomModalWindow({
show: true, // Show the modal on creation
mode: null, // Disable modal mode, allow click outside to close
headerText: 'Hello World!',
htmlContent: '<p>This is an example of the popup.</p>',
theme : 'dark',
onClose : (self) => {
console.log('Another close hook...')
}
})
document.querySelector('#show-modal-btn').addEventListener('click', (e) => {
modal.setVisible(true)
})
.md-dialog {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0.4);
}
.md-dialog.md-dialog-visible {
display: block;
}
.md-dialog .md-dialog-window {
border: 1px solid #888;
background-color: #fefefe;
width: 80%;
margin: 10% auto;
}
.md-dialog .md-dialog-header {
position: relative;
width: calc(100% - 0.5em);
height: 1.667em;
font-weight: bold;
font-size: 1.33em;
line-height: 1.667em;
padding: 0.125em 0.25em;
background-color: #DDD;
}
.md-dialog .md-dialog-header-close-btn {
position: absolute;
font-weight: bold;
top: 0;
right: 0;
width: 0.875em;
height: 0.875em;
line-height: 1em;
padding: 0.1em;
color: #7F7F7F;
}
.md-dialog .md-dialog-header-close-btn:before {
content: '\2715';
}
.md-dialog .md-dialog-header-close-btn:hover,
.md-dialog .md-dialog-header-close-btn:focus {
color: #FFF;
text-decoration: none;
cursor: pointer;
background: #F00;
}
.md-dialog .md-dialog-content {
width: 100%;
padding: 0.25em;
}
/** Example Dark Theme */
.md-theme-dark.md-dialog {
background-color: rgba(0, 0, 0, 0.8);
}
.md-theme-dark.md-dialog .md-dialog-window {
border: 1px solid #666;
background-color: #111;
color: #EEE;
}
.md-theme-dark.md-dialog .md-dialog-header {
background-color: #000;
}
.md-theme-dark.md-dialog .md-dialog-header-close-btn {}
.md-theme-dark.md-dialog .md-dialog-header-close-btn:hover,
.md-theme-dark.md-dialog .md-dialog-header-close-btn:focus {}
.md-theme-dark.md-dialog .md-dialog-content {}
<link href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css" rel="stylesheet" />
<button id="show-modal-btn">Open Modal</button>
<div id="myModal" class="md-dialog">
<div class="md-dialog-window">
<div class="md-dialog-header">
<div class="md-dialog-header-close-btn"></div>
<div class="md-dialog-header-text">$header</div>
</div>
<div class="md-dialog-content">$content</div>
</div>
</div>

In Bootstrap 5 (Beta 1) this gets as simple as this:
Your button (having onClick function call):
<button type="button" class="btn btn-primary" onclick='openModal()'>
Launch demo modal</button>
Your Modal:
<div class="modal fade" id="myModal" 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>
<div class="modal-footer">
<button type="button" class="btn btn-secondary"
data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And finally, the "pure" java script function:
<script type="text/javascript">
function openModal() {
var myModal = new bootstrap.Modal(document.getElementById('myModal'), { keyboard: false });
myModal.show();
}
</script>

well usually the option of modal for visibility is managed in state as boolean type.
you have to change the value of visibility as true(which is open) or false(and close), if there is no function that make visibility as false then you can't close the modal.
which mean is you need to use 'function' to change the 'value of visibility' that where in 'state' to control the modal view.
in react way.
view =( open modal )==> action === ( visibility) ==> state ===( change the value)===> view
and also your question is very abstractive.
anyway i hope that my answer can help you.

Play video on webpage like a pop up after clicking image

I need to play a video when the play button is clicked. But I need this video to play on the same page with the background faded out. The video needs to be displayed like a pop up video. I'm having problems getting the video to come up as a pop up when the image is clicked. I need it to be something like this when I click the watch a video. How can I go about doing this?
<div class="col-md-12 f-play-video">
<img class="play-button" src="http://www.clipartbest.com/cliparts/bcy/Egx/bcyEgxxzi.png">
</div>
.f-play-video{
text-align: center;
margin-top: 80px;
}
.play-button{
width:50px;
}
https://jsfiddle.net/4dd4ze53/3/

I guess The Modal Box will solve your problem. Just insert your video code into the box.
<head>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<button id="myBtn">Click here for video!</button>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p align="center">INSERT YOUR VIDEO HERE!</p>
</div>
</div>
<script>
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>

Following #ilmk, #A.Lau and #coskikoz, I managed to get the pop up working using bootstrap modal. This is my working code.
<div class="col-md-12 f-play-video" data-toggle="modal" data-target="#myModal">
<img src="images/play-video.svg">
</div>
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Video</h4>
</div>
<div class="modal-body">
<iframe width="100%" height="360" src="<iframe width="560" height="315" src="https://www.youtube.com/embed/7pvci1hwAx8?rel=0&controls=0" "frameborder="0" allowfullscreen autoplay></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

The example you have uses an onclick function to create a model at the end of the document and an overlay element at the top of the body, then appends the text in the model and replaces the video link.
onclick="return playYoutube("Achieve more everyday in your work and your daily life", this.href);"

How do I make the background of a modal clickable?

I want to create a chatbox that can be plugged into website. I have been using Bootstrap Modal to achieve this.
I want my modal to not close when user clicks outside the modal. But the website background should still be clickable/selectable, so that user can still perform operations on the website.
This is the code that I have written so far.
$(window).load(function () {
$('#myModal').modal({ backdrop: 'static', keyboard: false});
$('#myModal').modal('show');
});
function myFunction() {
$('#myModal').modal('toggle');
window.alert('Hello');
}
.vertical-alignment-helper {
display:table;
height: 100%;
width: 100%;
pointer-events:none; /* This makes sure that we can still click outside of the modal to close it */
}
.vertical-align-center {
/* To center vertically */
display: table-cell;
vertical-align: middle;
pointer-events:none;
}
.modal-content {
/* Bootstrap sets the size of the modal in the modal-dialog class, we need to inherit it */
width:inherit;
height:inherit;
/* To center horizontally */
margin: 0 auto;
pointer-events: all;
float: left;
max-width: 250px;
background-color: #ffffff;
}
.textarea-nonresizable {
height: 10em;
border-radius: 1em;
outline: none; /* removes the default outline */
resize: none; /* prevents the user-resizing, adjust to taste */
}
.header-cl {
background-color: #262626;
color: #FFFFFF;
border-bottom-width: 0px;
}
.header-f {
font-size: 14px;
font-weight: bold;
}
.body-cl {
background-color: #c7c8c9;
}
.foot-cl {
border-top-width: 0px;
padding-top: 0px;
background-color: #c7c8c9;
color: #FFFFFF;
}
.btn-ft {
background-color: #3f1603;
color: #FFFFFF;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .open>.dropdown-toggle.btn-primary {
color: #FFFFFF;
background-color: #3f1603;
}
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="modal fade " id="myModal" role="dialog">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center modal-sm">
<div class="modal-content">
<div class="modal-header header-cl">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span class="glyphicon glyphicon-minus-sign"></span>
</button>
<h4 class="modal-title header-f">Contact Us</h4>
</div>
<div class="modal-body body-cl">
<textarea class="form-control textarea-nonresizable" id="comment" placeholder="Type your message here"></textarea>
</div>
<div class="modal-footer foot-cl">
<div style="float:left;color:#FFFFFF;font-size: 11px;line-height: 34px;">
Powered by <strong>Stackoverflow</strong> </div>
<button type="button" class="btn btn-primary btn-ft" onclick="myFunction()">Start Text</button>
</div>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

You could use pointer-events: none; on .modal and .modal-backdrop. Or hide .modal-backdrop with display: none;
.modal {
pointer-events: none;
}
.modal-backdrop {
display: none;
}
EXAMPLE
To be honest, if you are going to modify the functionality of the bootstrap modal this much, you may as well just use a custom element with fixed position rather than trying to fight the Bootstrap CSS.