I've tried the following on JSFiddle
HTML:
<div id="dialog" title="Basic dialog">
<p>Hello.</p>
</div>
Link
JavaScript
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$(document.body).on('click',"a",function(event){
event.preventDefault();
$("#dialog").dialog('open');
});
});
I cannot close the dialog when I hit the close button. Why is it?
You're reopening the dialog when the close click bubbles up to the document level. The dialog close [x] is an <a> too.
Add this line to that "click" handler, at the very beginning:
if ($(this).hasClass('ui-dialog-titlebar-close')) return;
Alternatively, you could make your "open dialog" link more specific, by giving it a class or something:
<a href=# class=open-dialog>Link</a>
Then:
$('body').on('click', '.open-dialog', function(event) {
event.preventDefault();
$('#dialog').dialog('open');
});
By making the link to open the dialog distinct from the close button, you get around the ambiguity.
You must define CLOSE function:
HTML
<div id="dialog" title="Basic dialog">
<p>Hello.</p>
</div>
<a id="open" href="www.google.com">Link</a>
JavaScript
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$(document.body).on('click',"#open",function(event){
event.preventDefault();
$("#dialog").dialog('open');
});
$(document.body).on('click',".ui_icon_closethick",function(event){
event.preventDefault();
$("#dialog").dialog('close');
});
});
Working solution: http://jsfiddle.net/QTqUr/1/
Related
I would like to have a jquery pop up with confirmation info when clicking on a specific link in my navigation menu.I have the code below, but the popup does not appear, but the info on the popup display on the page among other page content.
HTML Link
<li>Order </li>
Dialog content
<div id="dialog-confirm">
<div class="message">UI Content goes here</div>
<div class="buttons">
</div>
jquery
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
$( "#order").click({
resizable: true,
height: "auto",
width: 600,
modal: true,
buttons: {
"Yes": function() {
window.location.replace("https://link_here");
},
No: function() {
window.location.replace("https://link_here");
}
}
});
});
} );
When I remove the $( "#order").click({ part of the jquery, it works as a popup for every link clicked, so the issue must be there but I am unable to solve.
You have calling dialog function before click
Please check below code
$(function(){
$('#order').click(function(e){
e.preventDefault();
$( "#dialog-confirm" ).dialog({
resizable: true,
height: "auto",
width: 600,
modal: true,
buttons: {
"Yes": function() {
window.location.replace("https://link_here");
},
No: function() {
window.location.replace("https://link_here");
}
}
});
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<li>Order </li>
<div id="dialog-confirm" style="display: none;">
<div class="message">UI Content goes here</div>
<div class="buttons">
</div>
1) add autoOpen: false to the dialog settings first, so popup won't be shown automatically on page load.
2) add click method on your link which will be showing the popup.
See this fiddle:
https://jsfiddle.net/4eo9w1cr/
I am a bit newbie in Jquery and java scripts and a bit confuse in this matter.
Here's my code of a simple modal message alert taken from JQuery UI.
The problem is that the function is being called in the div class in the HTML code:
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
</head>
<body>
<div id="dialog-message" title="Download complete">
<p>
<span class="ui-icon ui-icon-circle-check" style="float:left; margin:0 7px 50px 0;"></span>
Your files have downloaded successfully into the My Downloads folder.
</p>
<p>
Currently using <b>36% of your storage space</b>.
</p>
</div>
But what i want to do is to create 2 parameters: 1 receives some text and the 2nd is when i press ok it goes to a link.
I am developing a website and i don't want to use the browsers alert, just want to use that JQuery script and do something like this:
<?php
function alerta($texto="",$redirect=""){
print("<Script language=javascript>");
if($texto!="")
print("alert(\"$texto\");");
if($redirect!="")
print("window.location=\"$redirect\";");
print("</script>");
}
?>
You can echo your text (Variable 1) inside the div modal, and then use the redirect function on 'OK' button click event:
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
window.location = "$YOUR_VARIABLE_2";
}
}
});
});
Here is my html code
<div id="dialog" title="Basic dialog" style="display: none">
<p id="para">Copy this key</p>
<p id="key">4567887654345678</p>
</div>
<button>Open dialog</button>
The div appears as a dialog on button click, and I would like to have the "key" text selected when the dialog opens
Here is the javascript for the same, but the < p> doesn't appear to be selected
$(function() {
$( "button" ).click(function() {
$("#dialog" ).dialog();
$( "#dialog" ).show( "slow" );
$("#key").select();
});
});
How can I make the < p> be pre-selected ?
Change the key paragraph to an editable element, such as a textarea:
<textarea id="key">4567887654345678</textarea>
JSFiddle
It appears you need an editable text field to select text in.
I think you should use jQuery dialog open event:
$( "#dialog" ).dialog({
open: function( event, ui ) {
$("#key").select();
}
});
JSFiddle
I have a jQuery dialog box which appears when a button is pressed. I want the background to fade out colour (dim) when the dialog box is open.
What do I have to put or replace in the CSS to achieve this.
Here is the code:
// Button that brings up a dialog box
<div id="dialog" title="Sign in" style="display:none">
Sign in
</div>
// jQuery dialog function
<script>
function check_domain_input()
{
$( "#dialog" ).dialog();
var domain_val = document.getElementsByName('domain');
if (domain_val[0].value.length > 0)
{
return true;
}
$( "#dialog" ).dialog();
return false;
}
</script>
A modal dialog prevents the user from interacting with the rest of the page until it is closed.
$("#dialog").dialog({modal: true});
I have a html structure. With the following:
<div class="edit"><a class="formtri" href="#">CHANGE</a>
And:
<div id="user_adr" style="display:none">
I want, when i click CHANGE, get user_adr div on front. Ajax or other solution. I tried jQuery .load function but it's not work. How can i do this?
Demo
You can use toggle() function to show / hide html element.
Live Demo
$('.edit').click(function(){
$('#user_adr').toggle();
});
alternatively you can use toggle functionality.
$('.edit').on('click',function(){
$('#user_adr').toggle();
});
if not toggle. then alternative method of toggle is this.
$('.edit').on('click',function(){
if('#user_adr').is('visible'))
{
$('#user_adr').show();
}
else
{
$('#user_adr').hide();
}
});
//to change display to none
$('#yourDivId).attr('display','none');
you can use jquery ui. dialog() method to show a dialog box. like this. Jquery dialog
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
if in case there is any other div with same class name edit above solutions may not be helpful so better u keep a unique id as "change"
<div class="edit"><a class="formtri" id="change" href="#">CHANGE</a>
$("#change").on("click", function(){
$('#user_adr').show();
});
$("#change").on("click", function(){
$('#user_adr').toggle();
});