Hi everybody,
I have a link who act as a dialog trigger. When the user click on the
link, I create an iframe and set his src attribute then I make a
dialog with this iframe.
var dialogurl = $(this).attr("href");
var container = $("<iframe></iframe>");
container.attr("title", container.find("title").text());
container.dialog({ bgiframe: true, modal: true, width: width,
height: height});
I need to use an iframe because she contains a form who is validated
on the server side and if I put this form on a div insted of an
iframe, the submission make url change and goes to the form's action
url.
But the iframe use only 50% of the dialog size and, of course, I don't
want that. I have tried to change the css properties for ui-dialog-
content but that change nothing.
Can you help me to solve that ?
There is the dialog code created by JQuery (retrieved with FireBug on
FireFox 3.0.7)
<div style="overflow: hidden; display: block; position: absolute; z-
index: 1002; outline-color: -moz-use-text-color; outline-style: none;
outline-width: 0px; height: 472px; width: 678px; top: 548px; left:
201px;" class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-
draggable ui-resizable" tabindex="-1" role="dialog" aria-
labelledby="ui-dialog-title-1">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-
helper-clearfix" unselectable="on" style="-moz-user-select: none;">
<span class="ui-dialog-title" id="ui-dialog-title-1"
unselectable="on" style="-moz-user-select: none;">
</span>
<a href="#" class="ui-dialog-titlebar-close ui-corner-all"
role="button" unselectable="on" style="-moz-user-select: none;">
<span class="ui-icon ui-icon-closethick" unselectable="on"
style="-moz-user-select: none;">close</span>
</a>
</div>
<iframe src="/WebApp/frames/news/add.html?news=287" class="ui-dialog-
content ui-widget-content" style="height: 413px; min-height: 91px;
width: 337px;"/>
<div class="ui-resizable-handle ui-resizable-n" unselectable="on"
style="-moz-user-select: none;"/>
<div class="ui-resizable-handle ui-resizable-e" unselectable="on"
style="-moz-user-select: none;"/>
<div class="ui-resizable-handle ui-resizable-s" unselectable="on"
style="-moz-user-select: none;"/>
<div class="ui-resizable-handle ui-resizable-w" unselectable="on"
style="-moz-user-select: none;"/>
<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-
gripsmall-diagonal-se ui-icon-grip-diagonal-se" style="z-index: 1001; -
moz-user-select: none;" unselectable="on"/>
<div class="ui-resizable-handle ui-resizable-sw" style="z-index:
1002; -moz-user-select: none;" unselectable="on"/>
<div class="ui-resizable-handle ui-resizable-ne" style="z-index:
1003; -moz-user-select: none;" unselectable="on"/>
<div class="ui-resizable-handle ui-resizable-nw" style="z-index:
1004; -moz-user-select: none;" unselectable="on"/>
</div>
And then the iframe content :
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"; xml:lang="en">
<head>
<meta content="text/html; charset=ISO-8859-1" http-equiv="Content-
Type"/>
<title>Réagir à un article</title>
<!-- jQuery libraries -->
<script src="/WebApp/lib/jquery/jquery.js" type="text/javascript"/>
<script src="/WebApp/lib/jquery/jquery-ui-1.7.custom.min.js"
type="text/javascript"/>
<script src="/WebApp/lib/jquery/jquery.myutils.js" type="text/
javascript"/>
<script src="/WebApp/lib/effects.js" type="text/javascript"/>
<link href="/WebApp/css/default.css" type="text/css"
rel="stylesheet"/>
<link href="/WebApp/css/articles.css" type="text/css"
rel="stylesheet"/>
<link href="/WebApp/css/frames.css" type="text/css" rel="stylesheet"/
>
</head>
<div id="_firebugConsole" style="display: none;"
FirebugVersion="1.3.3"/>
<body>
<div id="framecontent">
<form onsubmit="return validateContent()" method="post" action="/
WebApp/frames/news/add.html?news=287" id="reactionform">
<h1>Article</h1>
<div class="article">
<p>Suspendisse euismod. Cras rhoncus fringilla purus. <a
href="#">Show window</a> Aenean eleifend massa sed dui. Donec
adipiscing, justo luctus ornare consequat, lectus eros congue est, ut
gravida est quam eget leo. Curabitur ultricies diam adipiscing arcu.
Vestibulum in felis ac diam condimentum placerat. Donec nec mi
pulvinar magna dignissim ultricies. Nam tempus varius lectus. Proin
sit amet massa vitae ante accumsan lobortis. Nam venenatis ligula ut
pede faucibus elementum. Aenean viverra rutrum eros. Pellentesque vel
odio a odio ultrices pretium. Vivamus placerat. Maecenas at massa nec
diam congue tincidunt. Lorem ipsum dolor sit amet, consectetuer
adipiscing elit.</p>
<div class="react">
<span class="header"> Réaction de Demo User le 13-03-09 a
13h25:</span>
<p><textarea style="margin: auto; width: 90%;"
id="reactcontent"/></p>
</div>
</div>
<input type="reset" value="Annuler" class="reset input button"/>
<input type="submit" value="Enregistrer" class="submit btn save
input button"/>
</form>
</div><!-- End of content -->
<div id="_container" style="display: none;"/>
</body>
</html>
Thanks
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
