I have an html page. On that page I want to open popup window. I have a link on which I have to click & open new pop up. But, it is not a new browser window. It is AJAX based popup.
I do have used Queness popup & YUI dialog popup.
Now, in that window I want to show an iframe which will display page related to link I have clicked. But, for security point of view, iFrame is not showing that page on popup window, but the control of the page transfers to that page & page gets redirected to that page.
How to make popup steady to show that window ?
Here, I am showing YUI dialog code :
<html>
<head>
<title>Yahoo Dialog !</title>
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/fonts/fonts-min.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/button/assets/skins/sam/button.css" />
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.8.1/build/container/assets/skins/sam/container.css" />
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/yahoo-dom-event/yahoo-dom-event.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/connection/connection-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/element/element-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/button/button-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/dragdrop/dragdrop-min.js"></script>
<script type="text/javascript" src="http://yui.yahooapis.com/2.8.1/build/container/container-min.js"></script>
<script type="text/javascript">
document.documentElement.className = "yui-pe";
</script>
<style type="text/css">
#example {
height:30em;
}
label {
display:block;
float:left;
width:45%;
clear:left;
}
.clear {
clear:both;
}
#resp {
margin:10px;
padding:5px;
border:1px solid #ccc;
background:#fff;
}
#resp li {
font-family:monospace
}
.yui-pe .yui-pe-content {
display:none;
}
</style>
<script>
YAHOO.namespace("example.container");
YAHOO.util.Event.onDOMReady(function () {
// Define various event handlers for Dialog
var handleSubmit = function() {
this.submit();
};
var handleCancel = function() {
this.cancel();
};
var handleSuccess = function(o) {
var response = o.responseText;
response = response.split("<!")[0];
document.getElementById("resp").innerHTML = response;
};
var handleFailure = function(o) {
alert("Submission failed: " + o.status);
};
// Remove progressively enhanced content class, just before creating the module
YAHOO.util.Dom.removeClass("dialog1", "yui-pe-content");
// Instantiate the Dialog
YAHOO.example.container.dialog1 = new YAHOO.widget.Dialog("dialog1",
{ width : "60em",
fixedcenter : true,
visible : false,
constraintoviewport : true,
buttons : [ { text:"Submit", handler:handleSubmit, isDefault:true },
{ text:"Cancel", handler:handleCancel } ]
});
// Validate the entries in the form to require that both first and last name are entered
YAHOO.example.container.dialog1.validate = function() {
var data = this.getData();
if (data.firstname == "" || data.lastname == "") {
alert("Please enter your first and last names.");
return false;
} else {
return true;
}
};
// Wire up the success and failure handlers
YAHOO.example.container.dialog1.callback = { success: handleSuccess,
failure: handleFailure };
// Render the Dialog
YAHOO.example.container.dialog1.render();
YAHOO.util.Event.addListener("show", "click", YAHOO.example.container.dialog1.show, YAHOO.example.container.dialog1, true);
//YAHOO.util.Event.addListener("hide", "click", YAHOO.example.container.dialog1.hide, YAHOO.example.container.dialog1, true);
});
</script>
</head>
<body class="yui-skin-sam">
<h1>Dialog Quickstart Example</h1>
<div class="exampleIntro">
<p>The Dialog Control is designed to allow you to retrieve information from the user and make use of that information within the page — whether interally to the page or by sending the information to the server via form post or XMLHttpRequest. This example shows how to do the latter. Click the button to show the Dialog instance and its form fields; fill out the form; submit the form. Dialog will automatically use the YUI Connection Manager to send the data via XMLHttpRequest to the server and will then echo that data back to you on the page.</p>
</div>
<div>
<a href="#" id="show">Yahoo Mail !</a>
</div>
<form >
<div id="dialog1" class="yui-pe-content">
<div class="hd">Please enter your information</div>
<div class="bd">
<form method="POST" action="http://developer.yahoo.com/yui/examples/container/assets/post.php">
<div><p class="whitetext">YMail !<br/>
<iframe src ="http://www.stackoverflow.com/" width="750" height="400"><p>Ymail</p></iframe>
</p></div>
</form>
</div>
</div>
</form>
</body>
</html>
This is dialog.html page. But,while loading it, it will transfer to http://stackoverflow.com. You can change this url from src property of iframe.