I am trying to build a tool that has a modal which opens on page load, then the user would paste text into a textarea and submit. After that a function should run that returns a substring of that text for a specific number of characters.
Currently I am console logging the correct substring, but after I click the submit button, the modal runs again. I only want the modal to run once on page load.
Can anyone offer some guidance?
$(window).on('load',function() {
$('#myModal').modal('show');
});
function myFunction(info) {
var info = $('#textArea').val();
var result = info.substring(0, 66);
$('#result').html(result);
console.log(result);
}
.container >* {
margin:20px auto;
width: 80%;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Welcome to my Bringhurst Rule Tool</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>Bringhurst introduces designers to the "66 character rule," which states that 66 characters including special characters and spaces at a font-size of 16px is the ideal width for a single line of type in order to achieve maximum clarity and readability.</p>
<p>Close the modal to see what your 66 characters look like.</p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> <!-- footer end -->
</div> <!-- modal-content end -->
</div> <!-- modal dialog end -->
</div> <!-- mymodal end -->
<div class="container">
<header><h1>Bringhurst Rule</h1></header>
<form class="align-center">
<div class="form-group">
<label for="textArea"></label>
<textarea class="form-control" id="textArea" rows="3" placeholder="Paste your text here..."></textarea>
</div>
<button type="submit" class="btn btn-info" onclick="myFunction()">Get the substring!</button>
</form>
</div>
<div id="result"></div>
</body>
There are better ways to do what you're doing, like using jQuery's fancy event handlers instead of using inline event handlers, but the easiest answer to your question is to return false on the event.. do that by making two changes..
Make the event listener return the result of the event handler by changing the HTML like so.. onclick="return myFunction()" (added the return there)
return false from the function itself.
By returning false you're preventing the default action, which is to submit the form.
Alternatively you could remove the form itself or change the submit button to a regular button.
$(window).on('load',function() {
$('#myModal').modal('show');
});
function myFunction(info) {
var info = $('#textArea').val();
var result = info.substring(0, 66);
$('#result').html(result);
console.log(result);
return false;
}
.container >* {
margin:20px auto;
width: 80%;
}
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
</head>
<body>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Welcome to my Bringhurst Rule Tool</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>Bringhurst introduces designers to the "66 character rule," which states that 66 characters including special characters and spaces at a font-size of 16px is the ideal width for a single line of type in order to achieve maximum clarity and readability.</p>
<p>Close the modal to see what your 66 characters look like.</p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> <!-- footer end -->
</div> <!-- modal-content end -->
</div> <!-- modal dialog end -->
</div> <!-- mymodal end -->
<div class="container">
<header><h1>Bringhurst Rule</h1></header>
<form class="align-center">
<div class="form-group">
<label for="textArea"></label>
<textarea class="form-control" id="textArea" rows="3" placeholder="Paste your text here..."></textarea>
</div>
<button type="submit" class="btn btn-info" onclick="return myFunction()">Get the substring!</button>
</form>
</div>
<div id="result"></div>
</body>
You should prevent the page reloading after the submition and you can return as false onclick event;
<button type="submit" class="btn btn-info" onclick="myFunction(); return false;">Get the substring!</button>
$(window).on('load',function() {
$('#myModal').modal('show');
});
function myFunction() {
var info = $('#textArea').val();
var result = info.substring(0, 66);
$('#result').html(result);
console.log(result);
}
.container >* {
margin:20px auto;
width: 80%;
}
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.6/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
<body>
<!-- The Modal -->
<div class="modal fade" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Welcome to my Bringhurst Rule Tool</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<p>Bringhurst introduces designers to the "66 character rule," which states that 66 characters including special characters and spaces at a font-size of 16px is the ideal width for a single line of type in order to achieve maximum clarity and readability.</p>
<p>Close the modal to see what your 66 characters look like.</p>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div> <!-- footer end -->
</div> <!-- modal-content end -->
</div> <!-- modal dialog end -->
</div> <!-- mymodal end -->
<div class="container">
<header><h1>Bringhurst Rule</h1></header>
<form class="align-center">
<div class="form-group">
<label for="textArea"></label>
<textarea class="form-control" id="textArea" rows="3" placeholder="Paste your text here..."></textarea>
</div>
<button type="submit" class="btn btn-info" onclick="myFunction(); return false;">Get the substring!</button>
</form>
</div>
<div id="result"></div>
</body>
Related
.daterangepicker {
SingleDatepicker: true,
showdropdowns: true,
autoupdateinput: true,
parentE1: #modaldialogid
}
I have an input textbox with a calendar in a button. This textbox with calendar in a button will be shown in a modaldialog box which is popping from jQuery.
Also the above code snippet is called in the client side scripting for the calendar textbox.
Issue: modal dialog box is getting closed on click of the textbox near the calendar control but whereas the calendar button is clicked this issue doesn't occur and am getting the calendar dropdown.
I think it is due to the ID entered in the parentE1: parameter. How to show the input id without #
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css" />
<style>
html, body, .modal-content{
height: 100%;
overflow: auto;
}
</style>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">
<div>
<input type="text" name="daterange" value="01/01/2018 - 01/15/2018" />
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
$(function() {
$('input[name="daterange"]').daterangepicker({
opens: 'left'
}, function(start, end, label) {
console.log("A new date selection was made: " + start.format('YYYY-MM-DD') + ' to ' + end.format('YYYY-MM-DD'));
});
});
</script>
</body>
</html>
I am implementing one bootstrap pop-up. And I am putting some value with special characters in data-target. These value coming from DB, This pop-up implementing through loop.
I tried with w3school. How can I open pop-up with special characters.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Basic Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my(Modal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="my(Modal" 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>
If remove the ( then it will work. But these id is not my hand, these id coming from API.
You need to "escape" the special characters in the selector. This:
data-target="#my(Modal"
Should be:
data-target="#my\(Modal"
Or:
data-target="#my\000028Modal"
Your sample code with just one \ added:
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css)
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<h2>Basic Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#my\(Modal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="my(Modal" 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>
You have to escape the special characters in order to let jQuery know that you want to use the character the way it is and it should not consider as a syntax error.
function escapeString(str) {
return (str + '').replace(/[\\"')(]/g, '\\$&').replace(/\u0000/g, '\\0')
}
// Add special characters here ^ -- after \\
// This allows single, and double quotes,
// opening, and closing parentheses.
Wrap your target value with the above function:
data-target="+ escapeString(targetValue) +"
<div ng-repeat="rule in ruleDetails">
<div>{{rule.name}} <i data-toggle="modal" data-target="#{{ rule.name }}"></i>
</div>
<div class="modal fade" id="{{ rule.name }}" tabindex="-1" role="dialog"></div>
</div>
I have special characters in rule.name for example: 'as-copy(1) from test data'
which is bounded with id attribute of bootstrap modal. By this UI modal or popup
is not opening and displayed rule name. Please help how to trim or escape
special characters here?
Hello I am new to Wordpress,
I've got a button which is Quick Enquiry which is placed at the bottom of my post.
I want to open an iframe on that button's click.
I tried a plugin named iframe popup,
<button style="background-color: #232254; text-decoration: none; color: #ffffff; width: 200px; height: 50px; border-radius: 15px 15px 15px;" onclick="forIframe();">Quick Enquiry</button>
<script type="text/javascript">
function forIframe()
{[iframe-popup category="Category1"];}</script>
</div>
But nothing is working.
http://www.ithink.co/support_ticketing_system.html
Please visit this link, you will see a quick enquiry button. I want it exactly the same.
Thank you.
you can create popup by using bootstrap in wordpress
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Quick Enquiry</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">Quick Enquiry</h4>
</div>
<div class="modal-body">
<p>[iframe-popup category="Category1"]</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>
I have some trouble with overlays.
I want to create a page where on a button click, lets say "Login" button, a small popup window should appear to accept username and password etc. And the background should get applied with overlay.
You can use bootstrap modal to do this and create a login form in it. Like below.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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>
For more details visit this https://www.w3schools.com/bootstrap/bootstrap_modal.asp
Thanks
At first you create a division that cover whole page using transparent background.After that create another new division in that div .
#model{
position:fixed;
top:0px;
left:0px;
width:100%;
height:800px ; //Height of the screen
background:rgba(30,30,30,0.7);
}
<div id="model">
// your form here goes ...
</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>