Response title
This is preview!
Need help in Customisation of jqueryui-resizable-dialog-containing-iframe
in Using jQuery UI
•
11 years ago
Hi,
Iam using the example present in http://elijahmanor.com/webdevdotnet/post/jQuery-UI-Dialog-w-Resizable-iFrame.aspx. I want the below mentioned requirement to be implemented using the Jquery.
<script type="text/javascript">
$(function() {
$('a').click(function(e) {
e.preventDefault();
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
$('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({
title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
autoOpen: true,
width: 800,
height: 500,
modal: true,
resizable: true,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(800 - horizontalPadding).height(500 - verticalPadding);
});
});
</script>
When i click the first 3 href's the destination url should be opened in a popup and when i click the last href tag(4th colored in red) one popup should not be displayed.
<body>
<ul>
<li><a href="http://www.google.com" title="Google Dialog">Google</a></li>
<li><a href="http://jquery.com" title="jQuery Dialog">jQuery</a></li>
<li><a href="http://jqueryui.com" title="jQuery UI Dialog">jQuery UI</a></li>
<li><a href="http://google.com" title="Gogole UI Dialog">jQuery UI</a></li>
</ul>
</body>
Please help me regarding the same
Thanks & Regards,
Hari.
Iam using the example present in http://elijahmanor.com/webdevdotnet/post/jQuery-UI-Dialog-w-Resizable-iFrame.aspx. I want the below mentioned requirement to be implemented using the Jquery.
<script type="text/javascript">
$(function() {
$('a').click(function(e) {
e.preventDefault();
var $this = $(this);
var horizontalPadding = 30;
var verticalPadding = 30;
$('<iframe id="externalSite" class="externalSite" src="' + this.href + '" />').dialog({
title: ($this.attr('title')) ? $this.attr('title') : 'External Site',
autoOpen: true,
width: 800,
height: 500,
modal: true,
resizable: true,
autoResize: true,
overlay: {
opacity: 0.5,
background: "black"
}
}).width(800 - horizontalPadding).height(500 - verticalPadding);
});
});
</script>
When i click the first 3 href's the destination url should be opened in a popup and when i click the last href tag(4th colored in red) one popup should not be displayed.
<body>
<ul>
<li><a href="http://www.google.com" title="Google Dialog">Google</a></li>
<li><a href="http://jquery.com" title="jQuery Dialog">jQuery</a></li>
<li><a href="http://jqueryui.com" title="jQuery UI Dialog">jQuery UI</a></li>
<li><a href="http://google.com" title="Gogole UI Dialog">jQuery UI</a></li>
</ul>
</body>
Please help me regarding the same
Thanks & Regards,
Hari.
1