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/
Related
Is there a way to add the buttons to a specific part of the jquery dialog modal? For example, I have styling that is currently conditional on buttons being inside a div with a specific classname, is there a way for me to target the buttons to go inside that div?
HTML:
<div id="dialog-confirm" title="Header">
<div class="modal-inner2">
<div class="modal-header2">
<h1>Header</h1>
</div>
<div class="modal-content">
<p>I'm text</p>
<div class="BtnGoHere"></div>
</div>
JS:
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: [
{
text: "Cancel",
"class": "btn btn-cancel",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Save",
"class": "btn",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
i've been playing around your code and I think I found the solution:
HTML:
<div id="dialog-confirm" title="Header">
<div class="modal-inner2">
<div class="modal-header2">
<h1>Header</h1>
</div>
<div class="modal-content">
<p>I'm text</p>
<div class="BtnGoHere"></div>
</div>
Javascript:
$(function() {
$( "#dialog-confirm" ).dialog({
resizable: false,
height: "auto",
width: 400,
modal: true,
buttons: [
{
text: "Cancel",
"class": "btn btn-cancel",
click: function() {
$( this ).dialog( "close" );
}
},
{
text: "Save",
"class": "btn",
click: function() {
$( this ).dialog( "close" );
}
}
]
});
});
$( ".BtnGoHere" ).append( "<input type='button' value='NewButton' />" );
As you can see, you have only to use the append method from the element you want to insert the new one.
Also here you have the link of a jsfiddle to check the code working:
https://jsfiddle.net/1yfu4w8o/
Hope it helps!
Just put the buttons inside the modal in HTML.
<div class="BtnGoHere">
<button class="btn" type="button">Close</button>
<button class="btn" type="submit">Save</button>
</div>
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";
}
}
});
});
I need this popup to show only once for each visitor. When the user clicks the close button the cookie should trigger and set the popup to not show for 30 days. I have tried installing a cookie myself, but to no avail as I have limited understanding of JavaScript. I've read several posts on here relating to this, but they id not help me.
JavaScript:
<link rel="stylesheet" href="jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(function() {
$( "#dialog-modal" ).dialog({
height: 380,
width: 500,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
HTML:
<div id="dialog-modal" title="Please Note:" class="content-list">
<p>If you are taking advantage of our 21 day risk free trial <strong>your credit card will not be charged for 21 days</strong> after you receive your new biofeedback headband.</p>
<ul>
<li>Only Available for residents of the USA</li>
<li>No Risk - 100% Money-Back Guarantee</li>
<li>If you’re not satisfied we even pay for your return shipping</li>
</ul>
</div>
Thanks.
You could use the jquery cookie plugin. If you include that library, you can do the following:
$(function () {
if (!$.cookie("notice-accepted")) {
$("#dialog-modal").dialog({
height: 380,
width: 500,
modal: true,
buttons: {
Ok: function () {
$.cookie("notice-accepted", 1, { expires : 30 });
$(this).dialog("close");
}
}
});
}
});
Note: You will want to add style="display: none;" to your dialog <div> so it is not displayed when you do not open the dialog.
Demo on JSFiddle
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'm putting together a team page and I have a div for each team member that includes a photo and some employee information. When I click on the picture I want a dialog to popup and use $this context to find the employee data in that same div. I cannot find a way to do this.
I got it working one way, but in that case the dialog box would only pop up once. The way I have it now, all boxes show up by default and once I'm done clicking the x's I can then click on the photo and it opens them all again. I've also tried replacing .employee .employeeData with $(this) and had no luck.
EDIT: I figured out autoOpen: false will keep the dialog from automatically opening, but still doesn't fix my issue.
UPDATED: http://jsfiddle.net/eTBS5/1/
var $dialog = $('.employee .employeeData').dialog({
width: 600,
height: 400,
modal: true,
close: function() {
$(this).dialog("close");
}
});
$('.employee').click(function(){
$dialog.dialog('open');
});
<div class="employee">
<img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
<div class="employeeData">
<p>EMPLOYEE 1 - This is a paragraph about this person.</p>
</div>
</div>
<div class="employee">
<img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
<div class="employeeData">
<p>EMPLOYEE 2 - This is a paragraph about this person.</p>
</div>
</div>
<div class="employee">
<img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
<div class="employeeData">
<p>EMPLOYEE 3 - This is a paragraph about this person.</p>
</div>
</div>
<div class="employee">
<img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
<div class="employeeData">
<p>EMPLOYEE 4 - This is a paragraph about this person.</p>
</div>
</div>
The problem is because you are assigning all 4 dialogs at once. Try this instead:
var dialogs = [];
$('.employee .employeeData').each(function() {
dialogs.push($(this).dialog({
width: 600,
height: 400,
modal: true,
autoOpen: false,
close: function() {
$(this).dialog("close");
}
}));
});
$('.employee').click(function() {
dialogs[$(this).index()].dialog('open');
});
Example fiddle
Can be done like this too:
DEMO
var $dialog = $('#dial').dialog({
width: 600,
height: 400,
modal: true,
autoOpen: false,
open: function() {
$(this).html($(this).data('sender'));
}
});
$('.employee').click(function(){
$dialog.data('sender',$('.employeeData',this).html()).dialog('open');
});
Could also do it this way:
jsFiddle
var diagOpts = {
width: 600,
height: 400,
modal: true,
autoOpen: false
};
$('.employee').each(function() {
var $this = $(this),
$dialog = $this.find('.employeeData').dialog(diagOpts);
$this.on('click', function(){
$dialog.dialog('open');
});
});
The .each() call will create a private scope that you can use to cache the $dialog variable which can then be referenced directly in the click handler. You also don't need the close handler.
Your jQuery selector is going to find all "employee" and "employeeData" objects.
You should use the object the specific fired click event is attached to like this:
$('.employee').click(function(){
var empData = $(this).find('employeeData');
... get data from empData and open dialog with just that data
});