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});
Related
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'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/
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();
});
I have query regarding Accordion tabs ..
I have used Accordion Menu plugin Below code i have used for the tabs in the page .
[accordions]
[accordion title ="about"]**Content 1** [/accordion ]
[accordion title="Home"]**Content 2** [/accordion ]
[/accordions]
The web page looks like as follows:
I want first both these tabs to be collapsed and.When clicked on ABOUT it should expand and display the content .And once clicked on Home it should collapse ABOUT tab and expand the home page
By jquery i can achieve this but i dont know which script to download and work with it..
Any ideas??
Thanks in advance
I have two different methods for simple accordion; 1st with close button, 2nd is with hover trigger.
1) Here is JsFiddle example with close button:
jQuery:
$('.content').slideUp(400);//reset panels
$('.panel').click(function() {//open
var takeID = $(this).attr('id');//takes id from clicked ele
$('#'+takeID+'C').slideDown(400);
//show's clicked ele's id macthed div = 1second
});
$('span').click(function() {//close
var takeID = $(this).attr('id').replace('Close','');
//strip close from id = 1second
$('#'+takeID+'C').slideUp(400);//hide clicked close button's panel
});
html:
<div class="panel" id="panel1">panel1</div>
<div id="panel1C">content1
<span id="panel1Close">X</span>
</div>
<div class="panel" id="panel2">panel2</div>
<div id="panel2C">content2
<span id="panel2Close">X</span>
</div>
<div class="panel" id="panel3">panel3</div>
<div id="panel3C">content3
<span id="panel3Close">X</span>
</div>
-------
2) Here is JsFiddle example with hover trigger:
$('.panel').hover(function() {
var takeID = $(this).attr('id');//takes id from clicked ele
$('.content').stop(false,true).slideUp(400);//close
//used stop for prevent conflict
$('#'+takeID+'C').stop(false,true).slideDown(400);//open
//show's clicked ele's id macthed div
});
In case you use jQuery UI Accordion, you can add simple event to your accordion.
or add event:
$( ".selector" ).bind( "accordioncreate", function(event, ui) {
$( ".selector" ).accordion( "option", "active", -1 )
});