I have a button with the code:-
<button type="button" name="btn-success" data-toggle="modal" data-target="#exampleModal" class="btn-success">Process</button>
with A Modal.
Now I want to change the button like this
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
And I want data-toggle="modal" data-target="#exampleModal"
to be executed in the function.
I tried
<script>
function myFunction(){
data-toggle="modal" data-target="#exampleModal";
};
</script>
But it didn't work. Can anyone teach me how to do that?
You can try this as your are using bootstrap.
<script>
function myFunction(){
$("#exampleModal").modal('toggle'); //see here usage
};
</script>
Your HTML
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
You are using bootstrap so better use modal('toggle')
function myFunction(){
$("#exampleModal").modal('toggle')
}
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
Working example
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<script type="text/javascript" src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<style id="compiled-css" type="text/css">
.row {
background: #f8f9fa;
margin-top: 20px;
}
.col {
border: solid 1px #6c757d;
padding: 10px;
}
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
function myFunction() {
$("#exampleModal").modal('show')
}
</script>
</head>
<body>
<button type="button" name="btn-success" onclick="myFunction()" class="btn-success">Process</button>
<div id="exampleModal" 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>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent) {
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: ""
}], "*")
}
// always overwrite window.name, in case users try to set it manually
window.name = "result"
</script>
</body>
</html>
Related
I want to get my output in the pop up modal
My question was to create an array with ticket numbers
UI should have a button to select the winner. upon clicking the button
one of the lottery numbers should be randomly shown as the winner in the following way
1. inside the console
Inside an modal popup box
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<title>Document</title>
</head>
<body>
<button onclick="myFunction()">Click me</button>
<p id="test"></p>
<div class="container">
<h2>Lottey Winner</h2>
<button type="button" class="btn btn-info" data-toggle="modal"
data-target="#myModal" data-target="#test" id="btn1" onclick="myFunction()">
Winner
</button>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body" >
<p id="test"></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<script>
const a=["12","34","45","67"];
const random = Math.floor(Math.random() * a.length);
console.log( a[random]);
function myFunction() {
document.getElementById("test").innerHTML = a[random];
}
</script>
</body>
</html>
I want user to fill the form and after filling it, if the form is compatible with Validations(there can't be a null value) I want to show user a "Successfull" notification. But in this code, when I click on save button , it doesn't check the validations even though I didn't fill the form but still pushes "Successfull" notification. How can check the validations in Javascript. What am I missing here because I'm terrible at Javascript?
<head>
<meta charset="utf-8">
<meta name="viewport">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/css/site.css />
<script defer src="~/js/site.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" />
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</head>
<body>
<form method="post" asp-action="Create" id="form" >
<div class="form-group">
<label asp-for="Order">Order</label>
<input asp-for="Order" class="form-control" id="Order" >
#Html.ValidationMessageFor(m=>m.Order,"")
<span asp-validation-for="#Model.Order" class="text-danger"></span>
</div>
</br>
<div class="btn btn-primary" id="btnSave">
<p1>Save</p1>
</div>
<div class="btn btn-primary" id="btnSave">
<button class="btn btn-primary" style="visibility:visible" data-toggle="modal" data-target="#Modal1"> Button</button>
</div>
</form>
<div id="Modal1" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="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">
New product has been saved successfully.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
//function checkFormValidateOrNot() {
// if ($(".field-validation-error").length > 0) {
// return false;
// }
// $(".form-control").each(function () {
// if ($(this).attr("data-val") == "true" && $(this).val() == "" &&
// $(this).is("select") == false) {
// return false;
// }
// });
// return true;
//}
$("#btnSave").click(function () {
//if (checkValidateOrNot() == true) {
//}
$('#Modal1').modal('show');
});
})
})
</script>
</body>
1.You can use validate() method which exists in jquery.validate.js to validate the form.
2.It is better for you to use the default version bootstrap and jquery in wwwroot folder. Otherwise, the modal will not display due to the compatibility of the nuget packages.
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
Whole working demo:
<head>
<meta charset="utf-8">
<meta name="viewport">
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no" />
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/jquery-validation/dist/jquery.validate.min.js"></script>
<script src="~/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.min.js"></script>
<link rel="stylesheet" href="~/css/site.css />
<script defer src="~/js/site.js"></script>
//modify here...
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<form method="post" asp-action="Create" id="form" >
<div class="form-group">
<label asp-for="Order">Order</label>
<input asp-for="Order" class="form-control" id="Order" >
#Html.ValidationMessageFor(m=>m.Order,"")
<span asp-validation-for="#Model.Order" class="text-danger"></span>
</div>
</br>
<div class="btn btn-primary" id="btnSave">
<p1>Save</p1>
</div>
<div class="btn btn-primary" id="btnSave">
<button class="btn btn-primary" style="visibility:visible" data-toggle="modal" data-target="#Modal1"> Button</button>
</div>
</form>
<div id="Modal1" class="modal fade">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="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">
New product has been saved successfully.
</div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(document).ready(function () {
$("#btnSave").click(function () {
var validator = $("#form").validate();
var flag = validator.form();
if (flag) {
$('#Modal1').modal('show');
}
});
})
})
</script>
</body>
.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 don't know what I'm doing wrong but my hasFocus binding on a modal doesn't work. I looked at this jsfiddle example posted by #jasper-tey but when I pulled it out of a frame and wrote it as a standalone HTML page it wouldn't work.
I debugged the setFocus function and confirmed that the isFocused value is being set in the model. The binding seems to be correct and the parser isn't yelling at me. Yet the modal doesn't get focus in my code but it seems to work fine in the jsfiddle example. Any pointers on what I am missing would be most appreciated.
Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Input-focus in a Modalized Knockout Template</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.9.0.js"></script>
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/knockout/knockout-2.2.1.js"></script>
<style id="compiled-css" type="text/css">
.container {
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<h4>Input-focus in a Bootstrap Modal</h4>
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Launch modal</button>
<div class="modal 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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel"></h4>
</div>
<div class="modal-body" data-bind="template: { name: 'bodyTemplateA'}"></div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary" data-bind="click: setFocus">Set Focus</button>
</div>
</div>
</div>
</div>
</div>
<script id="bodyTemplateA" type="text/html">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" data-bind="value: name, hasFocus: isFocused" />
</div>
<div class="form-group">
<label>Type</label>
<input type="text" class="form-control" data-bind="value: type" />
</div>
</script>
<script type="text/javascript">
$(window).load(function(){
function mainModel (){
var self = this;
self.name = ko.observable("Blue border when in focus");
self.type = ko.observable();
self.header = ko.observable("This is a modal");
self.body = ko.observable('bodyTemplateA');
self.isFocused = ko.observable(false);
self.setFocus = function() {
data.isFocused(true);
}
}
var data = new mainModel();
ko.applyBindings(data);
$('#myModal').on('shown.bs.modal', function(){
data.isFocused(true);
});
});
</script>
</body>
</html>
I've changed the code and updated the knockoutjs import, from version 2.2.1 to version 3.1.0 and it worked.
The code that i changed:
var data = {
// var self = this;
name: ko.observable(),
type: ko.observable(),
header: ko.observable("This is a modal"),
body: ko.observable('bodyTemplateA'),
isFocused: ko.observable(false),
setFocus: function() {
data.isFocused(true);
},
}
ko.applyBindings(data);
$('#myModal').on('shown.bs.modal', function(){
data.isFocused(true);
});
Although I think the library version is the one causing trouble.
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>