Can some please help me with this. I created a button where a user can click on and it opens a new window which allows the person to fill out the forms on the page and share a property with a friend...
instead i want it to be a pop up dialog box which will have the main page in the background .. here is my code can some one please help
$('.profileHeader').after('<div id="emailWrapper" class="right"/>');
$('#emailWrapper').prepend($('li.five'));
$('li.five').css({"width": 142,"height": 50});
$("li.five").addClass("nice medium orange radius button right headerEmailAFriend");
$(".five > .event-click").css({"border-style": "none"});
$(".five > .event-click").css({"color": "#ffffff"});
$('.#emailWrapper').click(function () {
$("#emailWrapper").dialog("open");
event.preventDefault();
href = $(this).attr('href');
console.log(href);
url.dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
});
I CHANGED UP MY CODE THE BOTTOM PART I REALIZED I NEEDED TO REMOVE THE DOT... NEW ERROR IS THAT WHEN I CLICK THE BUTTON NOW THE BUTTON GOES AWAY HERE IS THE CODE
$('#emailWrapper').click(function() {
event.preventDefault();
$('#emailWrapper').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
OK THIS IS WHAT I HAVE NOW BASED ON WHAT I GOT FROM THIS FORM... STILL HAVE AN ERROR
< div id = "emailWrapper" > < p > emailWrapper < /p>
</div > $('#emailWrapper').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: tue
});
$("#emailWrapper").dialog("open");
$('#emailWrapper > li > a').bind('click', function(e) {
e.preventDefault();
var url = $(this).attr('href');
$('body').prepend('<div id="loadEmailFriend" class=""/>');
$('#loadEmailFriend').load(url, function () {
$('#loadEmailFriend').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
});
$("#emailWrapper").dialog("open");
});
Here is the new code i came up with.. problem now is that nothing comes up in a dialog box. I am trying to take the information that comes up on another page (email a friend) and make it into a dialog box which just pops up on the same page.
Your error is here
$('.#emailWrapper').click(function () {
From the rest of your code, you appear to be referring to an element with an ID of emailWrapper. You want to remove the dot from your selector. Inside your function, you refer to an event object. You have to pass this in your function.
$('#emailWrapper').click(function (event) {
EDIT
You're second issue is that you're trying to make your button be the dialog. You really need to create a div that will contain your dialog content. For example
<div id="mydiv">
<p>Display some stuff here</p>
</div>
Then define it as
$('#mydiv').dialog({
resizable: false,
autoOpen: false,
height: 140,
modal: true,
});
Then open it inside your click event
$("#mydiv").dialog("open");
Related
I need help on a small javascript portion of my website assignment for class, filling in the blanks:
In the script section of your contact.html page, inside your document ready function but outside your submit function) add the following code to turn the dialog div (above) into a jQuery dialog box.
$(_______).dialog({
autoOpen: _____________,
modal: ________,
width: ________,
buttons: {
"_______": function() {
$(this).dialog("close");
}
}
});
Note, this is just the code you are given in the demos for creating a dialog box. I have added several blanks to the code that you will need to set as follows:
The dialog function needs to be called for the element with the id of dialog.
It should not auto open
It should be modal
It should have a width set that is less than 600 pixels
The button name should be OK or Accept or something like that.
Although this not the right forum to ask these kind of questions, here is the answer for your question.
$("#DivIdWhichWillBecomeADialog").dialog({
autoOpen: false,
modal: true,
width: 500px,
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
$(function(){
$("#dialog").dialog({
autoOpen: false,
modal: true,
width: 500px,
buttons: {
"OK": function() {
$(this).dialog("close");
}
}
});
Here is your answer:
$(function() {
$("#dialogDivId" ).dialog({
autoOpen: false,
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
},
width:550
});
});
I'm really new to this and have never tried to create modal dialogs before. I need to make a modal dialog appear when a buttons is clicked. The code:
function onButtonClick(e, data) {
switch (data.name) {
case "tree":
window.location.href = "familytreeprocess.php?tree=" + data.context.id;
break;
case "edit":
jQuery("#divdeps").dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
draggable: false,
resizable: false,
width: 415,
height: 175
});
break;
}
}
It works fine. However, I would like the dialog to appear next to the button clicked, to the left of the button to be exact. How can I find the position of the currently clicked button and make the dialog to adjust to it?
According to jQuery's documentation, you can provide an Array containing the dialog position.
I want to add a jQuery dialog using an string containing html code stored in a variable. Is it possible? Here is some of the tried code.
$("#remove-post").dialog({
autoOpen: false,
height: 'auto',
width: 'auto',
modal: true
});
$("body").delegate("a.delete-post", "click", function (e) {
e.preventDefault();
button = $(this);
remove_dialog_html = '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
$('#remove-post').dialog("open");
});
You can simply change the html of this element.
$('#remove-post').html('<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>');
jsFiddle Demo
Edit:
You can also avoid adding the dialog to the original HTML file, by creating and destroying it when you open and close the dialog.
$('<div></div>')
.appendTo('body')
.html(htmlContent)
.dialog({
autoOpen: true,
height: 'auto',
width: 'auto',
modal: true,
close: function (event, ui) {
$(this).remove();
}
});
jsFiddle Demo
You cannot initialize jQuery dialog like this since it is not in the DOM at the page load time (where jQuery initialize the stuff).
What you have to do is that initialize dialog after adding the html to the DOM.
Just before $('#remove-post').dialog("open");
Are you looking for something like this. Check the fiddle below. Changed the code as per your requirement if this is what you are looking for.
http://jsfiddle.net/8R7xA/1/
$("#remove-post").dialog({
autoOpen: false,
height:'auto',
width:'auto',
modal: true
});
$(document).ready(function(){
var remove_dialog_html= '<div id="remove-post">Are you sure you want to delete this post? Once, deleted it can\'t be reversed.</div>';
$('#remove-post').html(remove_dialog_html);
$('#remove-post').dialog("open");
});
Please Refer this link link
Thanks!!
Edit: Try this:
$(document).ready(function () {
$("#divModifyDatesDialog").dialog({
autoOpen: false,
modal: true,
resizable: false,
draggable: false,
position: "center",
width: 550,
buttons: {
"Yes": {
click: function () {
-------------
},
"No": {
click: function () {
------
}
}
}
});
I'm pretty much a total noob to JavaScript and jQuery and I'm having trouble getting a basic dialog box working. Here is my code:
<script type="text/javascript">
$(document).ready(function() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
draggable: false,
resizable: false,
autoOpen: false,
width: 500,
height: 400
});
dialog.hide();
});
function showDialog() {
$("#dialog").dialog("open");
}
$("ui-widget-overlay").click(function() {
$(".ui-dialog-titlebar-close").trigger("click");
});
</script>
<div id="dialog">
Dialog text.
</div>
<button onclick="showDialog()">Show Dialog</button>
When I click the button, the title bar of the dialog comes up and the background of the page dims, but there are two problems:
The body of the dialog does not show (all that shows is the title bar)
When I click outside of the dialog, the dialog does not close. I have to click the "x" in the corner in order for the dialog to close.
I've been reading tons of related questions on here, but nothing I try seems to work. Any advice?
I believe the problem you're having is from this line:
dialog.hide();
What I would suggest is removing all of the dialog content from the dialog div and populating it when you actually show the dialog.
<div id="dialog"></div>
function showDialog()
{
$("#dialog").html("Dialog Text.");
$("#dialog").dialog("open");
}
As for handling the close part, have you tried nesting everything in the main page in a <div> of its own and then handling that click event?
<div id="mainPageDiv">
</div>
$("#mainPageDiv").click(function(){
$("#dialog").dialog("close");
});
Just use a modal dialog and close the dialog when they click the overlay. Also, you should not need to put any code in $(document).ready for this.
function showDialog() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
open: function () {
$('.ui-widget-overlay').bind('click', function () {
dialog.dialog('close');
});
}
});
}
Demonstration
I see your:
$("ui-widget-overlay").click(
perhaps should select a class:
$(".ui-widget-overlay").click(
which does not happen as it does not exist, so you need to hook it to the document.
and the dialog.hide(); is not needed as it hides it automatically when it becomes a dialog
SO you should have:
$(document).on('click',".ui-widget-overlay", function() {
$(".ui-dialog-titlebar-close").trigger("click");
});
more simply:(if you have no other dialogs you need to deal with this way)
$(document).on('click',".ui-widget-overlay", function() {
$("#dialog").dialog("close");
});
sample fiddle to show full reworked code: http://jsfiddle.net/GrFE3/2/
I am adding this as an additional answer as it goes about this differently, changing the markup, removing the in-line event handler in the markup, uses your button, and uses your dialog variable (differently than you, but...
<div id="dialog">
Dialog text.
</div>
<button id="showDialog">Show Dialog</button>
and the code for that markup:
$(document).ready(function() {
var dialog = $("#dialog");
dialog.dialog({
title: "Dialog",
modal: true,
draggable: false,
resizable: false,
autoOpen: false,
width: 500,
height: 400
});
$('#showDialog').click(function() {
dialog.dialog("open");
});
$(document).on('click', ".ui-widget-overlay", function() {
dialog.dialog("close");
});
});
I want to enable a button after that i have opened a jquery dialog with option modal set to true.The button obviously is outside the dialog. I already know that this seems to be a strange request but i need this behaviour because I have a form in the dialog so after click on the button to submit the data I have to append the dialog at the end of the form and then click agin on the button that now is outside of the dialog.
Thank you in advance.
Use te open event that is fired whenever the dialog is opened
$( ".selector" ).dialog({
open: function(event, ui) {
$('#yourhiddenbutton').show();
}
});
EDIT - you could do it like this
$(function() {
$("#dialogRifiuto").dialog({
width: 'auto',
autoOpen: true,
closeOnEscape: true,
modal: true,
resizable: false,
open: function(){
//change the z-index and position the div where you want
$('#a').css({'z-index': 1005, 'position': 'absolute', 'top': 0 });
},
close: function(){
//go back to normal
$('#a').css({'z-index': 1, 'position': 'static' });
}
})
});
You can enable the button using
$('#myButton').removeAttr('disabled');