I am using http://github.com/voronianski/jquery.avgrund.js/
my js call is:
$('.reserve_button').avgrund({ enableStackAnimation: false, onBlurContainer: '.content', holderClass: 'custom', template: $(".rezerve-modal").html() });
and my popup content is:
<div class="avgrund-overlay"></div>
<div class="rezerve-modal">
<div style="background-color: #CEEEF2; padding: 5px 10px; height: 100%;">
some content
<span class="modal-btn hoverU cancel">Cancel</span>
</div>
</div>
What I want is, when I click cancel I want popup to be closed.
You have got different attributes for that:
showClose: false, // switch to 'true' for enabling close button
showCloseText: '', // type your text for close button
closeByEscape: true, // enables closing popup by 'Esc'..
closeByDocument: true, // ..and by clicking document itself
I fixed this by adding avgrund-close class to element I want to use for close. there is nothing else to be done.
<span class="modal-btn hoverU avgrund-close cancel">İptal</span>
after small modifications on css classes I achieved my goal.
Related
I have almost identical multiple divs on a page. They all have graphs inside I want some of them to have popovers when they are hovered.
I want to decide for each div if the popover is displayable or not. Is there a property that I can include inside options such as "diplay: false" ?
HTML
<div id="{{graph.id}}" data-ng-repeat="graph in graphs" data-placement="top" data-original-title="Parameters"></div>
JS
var options = {
html: true,
placement: 'top',
trigger : 'hover',
content: function() {
return $('#info-chart-' + currentObj.id).html();
}
}
$(currentObj.id).popover(options);
You can add some class to those elements on which you don't want popup like nopop class.
<div id="{{graph.id}}" class="nopop" data-ng-repeat="graph in graphs" data-placement="top" data-original-title="Parameters"></div>
Now change the jquery code.
$(currentObj.id).not(".nopop").popover(options);
You can check here --> JsFiddle
I am looking to dynamically change the image shown in the jQuery Dialog. I am trying to pass the ‘image path’ as parameter which will be used to change the image shown in the jQuery dialog. Please! Check my code below.
By default, it will show ‘images/firstImage.jpg’ in the jQuery Dialog. Now, I am trying to change it to ‘images/secondImage.jpg’ through jQuery Dialog parameter.
<link href="jquery/jquery-ui.css" rel="stylesheet" />
<script src="jquery/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
$(function () {
// this initializes the dialog (and uses some common options that I do)
$("#dialog").dialog(
{
autoOpen: false,
modal: true,
show: "blind",
hide: "blind",
width: "50%",
height: "auto",
resizable: false,
position: 'center',
overflow: "hidden",
});
});
function OpenGallary(photoSrc) {
$("#dialog").dialog("open").data("param", photoSrc);
}
</script>
<body>
<a onclick="OpenGallary('images/secondImage.jpg')">Click ME</a>
<div id="dialog" title="Photo Gallary">
<div id="aa" style="width: 800px;">
hello this is my world.
</div>
<p>
<img src="images/firstImage.jpg" />
</p>
</div>
</body>
Your function OpenGallary (I think you mean Gallery, but I digress) is just setting the data attribute on the dialog div, which is not going to affect the image tag.
The OpenGallary function can be changed to something like:
function OpenGallary(photoSrc) {
// Change the src attribute directly on the img in the dialog:
$("#dialog img").attr("src", photoSrc);
// Now that the dialog html is updated, open the dialog:
$("#dialog").dialog("open");
}
Depending on what you're trying to do, you may want to select the img directly with an id on the tag - the selector used above is just for working with the existing html.
I'm using jquery dialog popup.
I have multiple div's (dynamically created) that require the pop-up on a single page.
My current issue is when I click the .open, all (10) pop-ups are opening, how can I trigger only one?
My html is as follows:
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
<a class="open" href="#">
<img src="/images/someImage1.jpg" />
</a>
<div class="dialog" title="Gives Dialog Title"><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
My jquery is as follows:
<script type="text/javascript"> // added .dialog:disaplay:none; to desktop.css
$(document).ready(function () {
$('a.open').prop('id', function (i) {
return '' + (i + 1);
});
$(".dialog").dialog({
autoOpen: false,
draggable: false,
width: "300px",
modal: true,
buttons: {
"Close": function () {
$(this).dialog('destroy').remove()
}
}
});
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10")
.click(function () {
alert($(this).attr("id"));
$(".dialog").dialog("open");
return false;
});
});
</script>
This should work (or a variant of it).
$("#1,#2,#3,#4,#5,#6,#7,#8,#9,#10").click(function () {
alert($(this).attr("id"));
$(this).next(".dialog").dialog("open");
return false;
});
I feel the need to tell you to just use a class as your click handler
$(".open").click(function(e) {
e.preventDefault();
$(this).next(".dialog").dialog("open");
});
There's no need for the ID's if you're not using them.
If I am reading your code correctly what you are doing is
$('.dialog').dialog('open');
i.e. you are getting hold of all elements that use the dialog class. Naturally, that opens all your dialogs all at once. If you rewrite your markup along the lines
<div class="dialog" title="Gives Dialog Title" id='diaOne'><!-- This is display:none in css-->
<p> Dialog text and stuff</p>
</div>
and then do
$('#diaOne').dialog('open');//grab just the dialog bearing the id diaOne.
that should I suspect do the trick
I am using the following code to open a dialog box:
<li>
<input type="button" value="Preview" onclick="showPreview('EmailPreview');" />
</li>
<div id="dialog">
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
modal: true,
height: 525,
resizable: false,
width: 600,
dialogClass: 'timer'
});
});
//]]>
</script>
</div>
In my .js file:
function showPreview(action, id) {
$.get("/Manage/Account/" + action + "/" + id, function (data) {
$("#dialog").html(data);
$('#dialog').dialog('open');
$('#Area, #Exchange, #Number').autotab_magic().autotab_filter('numeric');
$("#dialog input[type='button'], #dialog select,#dialog input:checkbox,#dialog input:radio,#dialog input:file").uniform();
});
I use this exact code in 3 locations. In one location everything is perfectly functional. In the other 2 locations, done exactly they same, just in different views, the dialog box will open but not close. Is there something obvious that I am missing?
This is in the dialogbox-view:
<div class="top"><a onclick="$('#dialog').dialog('close'); return false"><img src="/public/images/admin/btn-close.png" /></a></div>
I don't see any dialog closing anywhere, you can close your dialog with this function:
$('#dialog').dialog('close');
More about it: jQueryUI dialog
Also any element has to have unique ID, so it should be something like #dialog-a, #dialog-b, otherwise there will be errors with id selectors etc.
Your dialog element IDs need to be unique, or jQuery won't find the right one.
When I call the function, the dialog doesn't work.
If I move the dialog construction into the showtimes_list function, everything works fine.
I thought that variables declared outside a function were global in context?
var dialog_list = $("<div></div>").dialog({
autoOpen: false,
modal: true,
height: 300, width: 720,
});
function showtimes_list(sid){
dialog_list.html("");
$.get("ajax_showtimes.php?sid="+sid, function(data){
dialog_list.html(data);
}
);
dialog_list.dialog("open");
}
---Edit---
This is being called from an onClick to showtimes_list.
---Edit---
This is working:
function showtimes_list(sid){
$("#stl").dialog("open");
$("#stl").html("");
$.get("ajax_showtimes.php?sid="+sid, function(data){
$("#stl").html(data);
}
);
}
$(function(){
$('<div id="stl"></div>').appendTo(document.body).dialog({
autoOpen: false,
modal: true,
height: 300, width: 720,
});
});
Instead of creating a new empty div, add the div to the document, e.g.:
<body>
<div id="dialog">
<div id="dialogContent"></div>
</div>
</body>
Then, your script will become
var dialog_list = $("#dialog").dialog({ });
Then, when you want to change the HTML of that element, instead of changing the dialog itself, you'd want to change the dialogContent element:
function showtimes_list(sid){
var content = $("#dialogContent");
content.html("");
$.get("ajax_showtimes.php?sid="+sid, function(data){
content.html(data);
}
);
dialog_list.dialog("open");
}
If you don't want these empty divs in your HTML structure, you should add them to the body dynamically and use classes instead of ids.
Edit: to answer your question as to why it doesn't work when the dialog_list is outside the function, I'd imagine it has something to do with the generated html.
When you call .dialog(), jQuery generates the following HTML:
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
<p>Dialog content goes here.</p>
</div>
</div>
When this is outside of your function, it is called whenever it is encountered in the script... Then, in your function, you change that generated HTML. It's been a while since I dynamically updated dialog content, but I ran into the same problem, and the generated HTML was the culprit. I think my solution was to, instead of the nested divs in my original answer, I created the dialog as you did (outside the function), and inside the function, you change the html of the ui-dialog-content
For instance:
function showtimes_list(sid){
dialog_list.find('.ui-dialog-content').html("");
$.get("ajax_showtimes.php?sid="+sid, function(data){
dialog_list.find('.ui-dialog-content').html(data);
}
);
dialog_list.dialog("open");
}