I have a javascript function called confirm() that that uses the JQuery UI library to open dialogs.
For example:
jQuery('#confirm-开发者_运维百科popup').dialog('open');
This opens up and renders a div with id confirm-popup
. I would like to switch to fancybox as it has an elastic effect that I need. So I was hoping that the following would work after I installed fancybox.
jQuery('confirm-popup').fancybox();
This doesn't appear to work. As far as I can see you can only call the fancybox()
function on an anchor tag. I don't want to use anchor tags, as this would involve a lot of code changes for me as I have already mapped my confirm function to these tags.
Ideally I would like to just grab the div element and show it in a similar way to the jQuery UI dialog method? Is there a way of doing this with Fancybox?
If you want to use FancyBox as a dialog, you can invoke it directly as such:
$.fancybox({
'width' : '60%',
'height' : '65%',
'autoScale' : true,
'hideOnContentClick' : false,
'href' : someUrl,
'callbackOnShow' : function(){ ... },
'onClosed' : function(){...},
'type' : 'iframe'
});
You can use fancybox for a div, but my first question is whether you left out your # for the ID? It would be useful if you'd post the HTML and where your fancybox() is called too, as it should be in document.ready. And you will want to call .fancybox() on what opens the dialog instead of directly on the dialog.
In case you missed it, this is the example from the fancybox site:
<script>
$(document).ready(function() {
$("#inline").fancybox();
});
</script>
<a id="inline" href="#data">This shows content of element who has id="data"</a>
<div style="display:none"><div id="data">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div></div>
This demonstrates how to use fancybox (1.3.4) without requiring the <a href>
link element by calling fancybox directly.
Inline:
<div style="display:none;">
<div id="confirm-popup">
dialog content
</div>
</div>
$('#myform').submit(function() {
$.fancybox({
type: 'inline',
content: '#confirm-popup'
});
});
Iframe:
$('#myform').submit(function () {
$.fancybox({
type: 'iframe',
href: 'http://www.abc123.com'
});
});
精彩评论