I want my custom dialog box to load on button click but that's not happening.I am using the dialog box on this webpage.
http://jqueryui.com/dialog/#default
here is my code..
function click(){
$(function() {
$( "#dialog" ).dialog({
width : 250,
height: 180,
modal : true
});
});
}
<div>
<button type="button" id="put" onclick="click()">Insert data</button>
</div>
The above code is not working..Please help...
It works fine there is prooflink
HTML:
<div id="dialog">
<p>THIS IS DIALOG!!!</p>
</div>
<button id="opener">Open Dialog</button>
And Jquery:
$(function() {
$( "#dialog" ).dialog({
autoOpen: false
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
The selector is trying to find an element with the id dialog but it looks like you don't have one. Try this:
Javascript:
$(document).ready(function ()
{
function click()
{
$('#dialog').dialog({
autoOpen: false,
width: 250,
height: 180,
modal : true
});
}
});
HTML:
<div id="dialog">
Your dialog message.
</div>
<button type="button" id="put" onclick="click()">Insert data</button>
function click(){
$( "#dialog" ).dialog({
width : 250,
height: 180,
modal : true
});
}
I am using jquery-2.1.0.min.js and jquery.ui-1.10.4.
Here is my full source code:
(For the jquery-ui.css link tag, change: href="path_to_your_jquery-ui/themes/base/jquery-ui.css")
(For the jquery script tag, change: src="path_to_your_jquery/jquery-2.1.0.min.js")
(For the jquery-ui script tag, change: src="path_to_your_jquery-ui/ui/jquery-ui.js")
(For your demos.css link tag, change: href="path_to_your_jquery-ui/demos/demos.css")
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="add-ons/jui/themes/base/jquery-ui.css"/>
<script src="add-ons/jquery-2.1.0.min.js"></script>
<script src="add-ons/jui/ui/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="add-ons/jui/demos/demos.css"/>
<!-- this in-file styling is used to hide the #dialog element initially -->
<style>
#dialog {
display: none;
}
</style>
<script>
$(document).ready(function() {
$("#put").on("click", function(evnt) {
$(function() {
$("#dialog").dialog({
width:250,
height: 180,
modal:true
});
});
evnt.preventDefault();
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>
This is the default dialog which is useful for displaying information.
The dialog window can be moved, resized and closed with the 'x' icon.
</p>
</div>
<div>
<button type="button" id="put">Insert data</button>
</div>
</body>
</html>
Be sure to pass an event parameter to your callback function in your 'on click' function and call the preventDefault() method on it. Read more about event.preventDefault() Also, here's an good read on event.preventDefault() vs. return false
<html>
<head>
<style>
/* 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: 40%;
}
/* 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;
}
.button11
{
background: #47bb7c;
border-radius: 2px;
border-bottom: solid 2px #489368;
border-left: 0 none;
border-right: 0 none;
border-top: 0 none;
padding: 4px 8px;
color: #fff;
font-size: 13px;
}
</style>
</head>
<body>
<h2>Modal Example</h2>
<!-- 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>
<center>
<p>Green Card</p>
<input type="button" class="button11" name="submit" id="submit" value="Print"/>
<center>
</div>
</div>
<script>
// 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";
}
}
</script>
</body>
</html>
Related
I have a kendo modal window, In which i have a form, so before closing I want to alert the user that there might be changes for that you have not saved. the problem is, kendo modal window seems to have only close event, so if I preventDefault on close event then it is difficult to close, and If I try to add custom 'X' button then it doesn't seem to be seating on the top right corner. any help/direction is appreciated. thanks
Try this:
function onClose(e) {
if (e.userTriggered) {
e.preventDefault();
if (window.confirm('Are you sure?')) {
dialog.data("kendoDialog").close();
}
}
}
Demo:
<!DOCTYPE html>
<html lang="en">
<head>
<base href="https://demos.telerik.com/kendo-ui/dialog/events">
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel="stylesheet" href="https://kendo.cdn.telerik.com/2022.2.510/styles/kendo.default-ocean-blue.min.css" />
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2022.2.510/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="../content/shared/styles/examples-offline.css">
<script src="../content/shared/js/console.js"></script>
</head>
<body>
<div id="example">
<span id="show" style="display:none" class="k-button k-button-solid-base k-button-solid k-button-md k-rounded-md hidden-on-narrow">Click here to open the dialog.</span>
<div id="dialog"></div>
<div class="responsive-message"></div>
<script>
var dialog = $("#dialog");
var show = $("#show");
dialog.kendoDialog({
width: "400px",
title: "Software Update",
closable: true,
modal: false,
content: "<p>A new version of <strong>Kendo UI</strong> is available. Would you like to download and install it now?<p>",
actions: [
{ text: 'Close', action: onClose },
{ text: 'OK', primary: true }
],
close: onClose
});
function onClose(e) {
if (e.userTriggered) {
e.preventDefault();
if (window.confirm('Are you sure?')) {
dialog.data("kendoDialog").close();
}
}
show.fadeIn();
}
show.click(function () {
dialog.data("kendoDialog").open();
show.fadeOut();
});
</script>
<style>
#example {
min-height: 370px;
}
#example .box {
margin: 0;
}
#show {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
margin-top: 30px;
}
</style>
</div>
<div class="kd-example-console">
<div class="header">
<span class="title">CONSOLE LOG</span>
<span class="clear kd-text-secondary">Clear log</span>
</div>
<div class="console"></div>
</div>
</body>
</html>
Dojo
I have one whole html page which has script to show the pop up when mouse leave in browser window. When user want to close the tab on browser the popup will be show. I already create that page and it works properly in example.com. In this case I want to call that page in another site called exampletwo.com, so when user want to close the exampletwo.com the popup from my page in example.com will be triggered and show in exampletwo.com. Which I want is some script or iframe to show that popup page from my site example.com to exampletwo.com. This is my code:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<title></title>
<script type="text/javascript">
var mouseX = 0;
var mouseY = 0;
var popupCounter = 0;
document.addEventListener("mousemove", function(e) {
mouseX = e.clientX;
mouseY = e.clientY;
//document.getElementById("coordinates").innerHTML = "<br />X: " + e.clientX + "px<br />Y: " + e.clientY + "px";
});
$(document).mouseleave(function () {
if (mouseY < 100) {
if (popupCounter < 1) {
var modal = document.getElementById("myModal");
modal.style.display = "block";
}
popupCounter ++;
}
});
//var span = document.getElementById("close");
</script>
<script type="text/javascript">
$( "#close" ).click(function() {
var modal = document.getElementById("myModal");
modal.style.display = "none";
});
</script>
<style type="text/css">
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
background-color: #fefefe;
margin-right: 0%; /* 15% from the top and centered */
padding: 0px;
border: 1px solid #888;
width: 30%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
#close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
#close:hover,
#close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div id="close">×</div>
<a href="<?=$image->link?>" target="_blank">
<img src="<?=base_url()?>assets/images/<?=$image->images?>" style="width: 100%;">
</a>
</div>
</div>
</body>
</html>
This is some example which I want, this script works properly to show the popup in another site but I don't understand how it works. I copied from some company which provide remarketing.:
<script type="text/javascript">
try{ var shopUrlCYB = 'yoursite.com'
!function(){var t=function(t){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src=t;var n=document.getElementsByTagName("script")[0];n.parentNode.insertBefore(e,n)},e=Math.floor(5e4*Math.random());t("//d2rp1k1dldbai6.cloudfront.net/cybba_latest.min.js"),t("https://files1.cybba.solutions/"+shopUrlCYB+"/loader.min.js?v="+e),window._vteq=window._vteq||[],setTimeout(function(){window._vtsdk||t("https://storage.googleapis.com/cybcdn/"+shopUrlCYB+"/loader.js?v="+e)},1100),setTimeout(function(){"nestedVarDefined"in window&&!nestedVarDefined("_vtsdk.state.eventQueue")&&"_vtsdk"in window&&_vtsdk.init()},3e3)}();
}catch(e){}
</script>
You cannot observe site 2 events from site 1. Using an iframe would not fix the problem, since you cannot close an iframe as a normal window. Javascript is a browser language with restrictions, communications between different windows are not allowed, for the same reason why cookies from different domains are not allowed.
I am trying to open a window and process the file in the calling JavaScript. I can pass the file name using localStorage but if I return the file I can't get it right.
I can't use this solution due to restrictions of the system I am calling the JavaScript from:
var fileSelector = document.createElement('input');
fileSelector.setAttribute('type', 'file');
fileSelector.click();
Can a file object be passed using localStorage or should I use another method?
My code is:
<!DOCTYPE html>
<html>
<script language="JavaScript">
function testInjectScript2(){
try {
var myhtmltext =
'<input type="file" id="uploadInput3" name=\"files[]" onchange=\'localStorage.setItem("myfile",document.getElementById("uploadInput3").files[0]);\' multiple />';
console.log("myhtmltext="+myhtmltext);
var newWin2 = window.open('',"_blank", "location=200,status=1,scrollbars=1, width=500,height=200");
newWin2.document.body.innerHTML = myhtmltext;
newWin2.addEventListener("unload", function (e) {
if(localStorage.getItem("myfile")) {
var f = localStorage.getItem("myfile");
alert ('in function.f='+f);
alert ('in function.f.name='+(f).name);
localStorage.removeItem("myfile");
}
});
} catch (err) {
alert(err);
}
}
</script>
<body>
<input type="button" text="testInjectScript2" onclick="testInjectScript2()" value="testInjectScript2" />
</body>
</html>
First of all, welcome to SO. If I get you right, you want to upload a file using a new window and get that file using localStorage onto your main page. This is a possible solution. However, please do also note that the maximum size of the localStorage can vary depending on the user-agent (more information here). Therefore it is not recommend to use this method. If you really want to do this, please have a look at the first snippet.
var read = document.getElementById("read-value"), open_win = document.getElementById("open-win"), win, p = document.getElementById("file-set");
open_win.addEventListener("click", function(){
win = window.open("", "", "width=200,height=100");
win.document.write(
'<input id="file-input" type="file"/>' +
'<script>' +
'var input = document.getElementById("file-input");' +
'input.addEventListener("change", function(){window.localStorage.setItem("file", input.files[0]);})'+
'<\/script>'
);
})
read.addEventListener("click", function(){
var file = window.localStorage.getItem("file");
if(file){
p.innerText = "file is set";
}else{
p.innerText = "file is not set";
}
})
<button id="open-win">Open window</button>
<br><br>
<!-- Check if file is set in localStorage -->
<button id="read-value">Check</button>
<p id="file-set" style="margin: 10px 0; font-family: monospace"></p>
<i style="display: block; margin-top: 20px">Note: This only works locally as SO snippets lack the 'allow same origin' flag. i.e. just copy the html and js into a local file to use it.</i>
However, why not use a more elegant solution:
Simply using a modal. When the input value changes you can simply close the modal and get the file value without all the hassle of a localStorage.
// Get the modal, open button and close button
var modal = document.getElementById('modal'),
btn = document.getElementById("open-modal"),
span = document.getElementById("close"),
input = document.getElementById("file-input"),
label = document.getElementById("input-label"), file;
// When the user clicks the button, open the modal
btn.addEventListener("click", function() {
modal.style.display = "block";
})
// When the user clicks on <span> (x), close the modal
span.addEventListener("click", function() {
modal.style.display = "none";
})
input.addEventListener("change", function(){
file = input.files[0];
modal.style.display = "none";
//Change value of the label for nice styling ;)
label.innerHTML = input.files[0].name;
//do something with your value
})
// When the user clicks anywhere outside of the modal, close it
window.addEventListener("click", function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
})
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 10px; /* 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 h2 {
font-family: sans-serif;
font-weight: normal;
}
/* 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;
}
/* Input styles, added bonus */
.file-input {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
.file-input + label {
font-size: 1.25em;
font-weight: 700;
padding: 10px 20px;
border: 1px solid #888;
display: inline-block;
cursor: pointer;
font-family: sans-serif;
}
.file-input:focus + label,
.file-input + label:hover {
background-color: #f7f7f7;
}
<!-- Trigger/Open The Modal -->
<button id="open-modal">Open Modal</button>
<!-- The Modal -->
<div id="modal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close" class="close">×</span>
<h2><i>Upload a file?</i></h3>
<input id="file-input" name="file-input" class="file-input" type="file"/>
<label id="input-label" for="file-input">Upload a file</label>
</div>
</div>
Hope it helps! Let me know!
Cheers!
I tried to create a function to show and hide a div, to hide the div user can use close button or click outside the div, but the problem is the close function to hide the div if user click element outside the div run first before i the div is showed:
html:
$('#close-add').on('click', function() {
$("#add-shipping-modal").hide();
});
$('#new-shipping').on('click', function() {
$("#add-shipping-modal").show();
});
$('body').click(function(event) {
setTimeout(
if (!$(event.target).closest('#add-shipping-modal').length && !$(event.target).is('#add-shipping-modal')) {
if ($("#add-shipping-modal").css('display') != 'none') {
$("#add-shipping-modal").hide();
}
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="new-shipping'">Open Div</button>
<div id="add-shipping-modal" style="display:none">
<button id="close-add">Close Div</button>
<p> Show Me </p>
</div>
when i click the #new-shipping button, the hidden div won't show up, i guess it's because when i click the #new-shipping button, it shows the div first and then trigger the body click function
There is already a solution provided at W3Schools.
Check Here: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_modal
Snippet
// 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;
}
<h2>Modal Example</h2>
<!-- 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>Some text in the Modal..</p>
</div>
</div>
You have added ' extra in your code after new-shipping
<button id="new-shipping'">Open Div</button>
should be
<button id="new-shipping">Open Div</button>
https://jsfiddle.net/bntnfhLm/
Also please change the body click function by using preventdefault/stopPropagation
$("#add-shipping-modal").click(function(e){
e.stopPropagation();
});
$(document).click(function(){
$("#add-shipping-modal").hide();
});
try this
$('#new-shipping').on('click', function () {
$("#add-shipping-modal").show();
return false;
});
$(document).click(function (event) {
$("#add-shipping-modal").hide();
});
try this
$('#close-add').on('click', function () {
$("#add-shipping-modal").hide();
});
$('#new-shipping').on('click', function () {
$("#add-shipping-modal").show();
return false;
});
$("#add-shipping-modal").click(function () { return false; });
$(document).click(function (event) {
$("#add-shipping-modal").hide();
});
I want to display my reference works on index. I limited the words. My aim is this: User who wants to learn detail information about post, will click the post thumbnail and the rest of content will open with popup.
I used w3css modal to make it. My javascript codes are:
// 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 on 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";
}
}
But only the first post seems like that. The others have no reaction.
Thanks.
I want to make all thumbnails like that
I made some revision about that. I used fancybox 2 and change my code with this
<?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?>
<div id="inline1" style="width:400px;display: none;">
<?php the_post_thumbnail('thumbnail', array('class' => 'aligncenter')); ?><?php the_content(); ?>
</div>
Now all the thumbnails open with fancybox but this time the other thumbnails' contents are same with the first post.
I don't think create a modal element in every container is a right way to go.
Instead, I will suggest you make only one modal element, and change the content of
that modal when any image got clicked.
thus, here is a demo that I just made
JSbin
The step will be
find out all container elems
bind those elems with click event
when user click one elem, extract the text and image src of that elem
inject into modal-body
removve hide class
It's fine to have modals mixed in. You have to be a little picky about event handlers and which one to close, but it's not too bad.
var sites = document.querySelectorAll('.site');
var closes = document.querySelectorAll('.close');
var ix;
for (ix = 0; ix < sites.length; ix++) {
sites.item(ix).addEventListener('click', showModal);
}
for (ix = 0; ix < closes.length; ix++) {
closes.item(ix).addEventListener('click', closeModal);
}
function showModal(e) {
e.stopPropagation();
this.querySelector('.modal').style.display = "block";
}
function closeModal(e) {
e.stopPropagation();
try {
getParent(this, 'modal').style.display = "none";
} catch (e) {
console.warn('Failed to find my daddy.');
}
}
function getParent(el, cls) {
while (el.parentElement) {
el = el.parentElement;
if (el.classList.contains(cls)) return el;
}
return null;
}
.site {
display: inline-block;
}
.thumbnail {
width: 100px;
height: 100px;
border: 1px solid black;
margin: 10px;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.4);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 50%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
line-height: 28px;
font-weight: bold;
cursor: pointer;
}
.close:hover,
.close:focus {
color: #000;
}
<link href="//cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css" rel="stylesheet" />
<div class="container">
<div class="site">
<div class="thumbnail"></div>
<div class="modal">
<div class="modal-content">
<span class="close">×</span> First Item
</div>
</div>
</div>
<div class="site">
<div class="thumbnail"></div>
<div class="modal">
<div class="modal-content">
<span class="close">×</span> Second Item
</div>
</div>
</div>
</div>