I have two yes no buttons that i wish to use at different stages of the program for different functions.
As they are linked to one function
<input type="button" value="Yes" class="yes" onclick="*choice1(1)*;" />
<input type="button" value="No" class="no" onclick="*choice1(0)*;" />
how can i make them useful for other functions as well, so i would not need more redundant buttons.
Im trying to create an interactive story. That at different stages there is a choice to make between two options. I am using an if else method, which makes it hard as far as i understand to designate a button to a function - because each function uses two options each time.
Here is the code (thank you very much:):
<script type="text/javascript">
var photo = "photo";
var edgar = "edgar"
var x;
function choice1(x){
if (x == 1)
{
document.getElementById("photo").src = "images/dragon1.jpg";
document.getElementById("stage1").innerHTML = "Once upon a time
there was a dragon";
setTimeout("choice2()",5*1000);
}
else if (x == 0)
{
document.getElementById("photo").src = "images/sea.jpg";
document.getElementById("stage1").innerHTML = "Would you like to
listen to some music?";
document.getElementById("edgar").play();
}
}
function choice2(x){
document.getElementById("photo").src = "images/dragon9.jpg";
document.getElementById("stage1").innerHTML = "Was he a friendly
dragon?";
if (x == 1)
{document.getElementById("photo").src = "images/dragon2.jpg";
document.getElementById("stage1").innerHTML = "He had many
friends and he liked to party";
}
else if (x == 0)
{ document.getElementByID ("photo").src = "images/dragon3.jpg";
document.getElementById("stage1").innerHTML = "He spent his days
thinking about the wrongs of the world";
}
}
</script>
</head>
<body>
<table align="center">
<tr>
<td colspan="2" align="center" width="800" height="300"><img
id="photo" width="800" height="300"></td>
</tr>
<tr>
<td colspan="2" align="center" width="800" height="100"><h1
id="stage1">Would you like to read a story?</h1></td>
</tr>
<tr>
<td align="center" width="400" height="200"><input type="button"
value="Yes" class="yes" onclick="choice1(1);" /></td>
<td align="center" width="400" height="200"><input type="button"
value="No" class="no" onclick="choice1(0);" /></td>
</tr>
</table>
</body>
</html>
Related
I'm trying to make a simple converter like this one, but in JavaScript, where you enter an amount in tons and it displays a bunch of different numbers calculated from the input, sort of like this:
This is what I've tried:
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
function calculate(t){
var j = document.getElementById("output")
var treesSaved = t.tons.value * 17;
j.value = treesSaved;
}
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" />
<input type="button" value="Calculate" onclick="calculate(this.form)" />
<br />
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
This works, to the extent that when you press the button, it calculates and displays the right number. However, it also seems to reset the form when I press the button, and I'm hoping to eliminate the need for the button altogether (so on every key press it recalculates).
Why is the form resetting, and how could I extend this to not need the button at all?
Here is the fiddle link for it:
Calculator
Use the below code to achieve what I think you want to :
<html>
<head>
<title>Calculator</title>
<script type="text/javascript">
function calculate(t){
var j = document.getElementById("output");
var rege = /^[0-9]*$/;
if ( rege.test(t.tons.value) ) {
var treesSaved = t.tons.value * 17;
j.value = treesSaved;
}
else
alert("Error in input");
}
</script>
</head>
<body>
<form>
<input type="text" placeholder="Tons" id="tons" onkeyup="calculate(this.form)"/>
<input type="button" value="Calculate" onclick="calculate(this.form)" />
<br />
<input type="text" id="output" value="Output" />
</form>
</body>
</html>
Please check this FIDDLE.
All you need to adding attributes data-formula to your table cells.
HTML
<table border="1">
<tr>
<td>
<input type="text" id="initial-val" />
</td>
<td>card board</td>
<td>recycled</td>
<td>reusable</td>
</tr>
<tr>
<td>lovely trees</td>
<td data-formula='val*5'></td>
<td data-formula='val+10'></td>
<td data-formula='val/2'></td>
</tr>
<tr>
<td>what is acres</td>
<td data-formula='val*2'></td>
<td data-formula='val*(1+1)'></td>
<td data-formula='val*(10/5)'></td>
</tr>
</table>
JAVASCRIPT
$(function () {
function isNumber(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
}
var $input = $('#initial-val'),
$cells = $('td[data-formula]');
$input.on('keyup', function () {
var val = $input.val();
if (isNumber(val)) {
$.each($cells, function () {
var $thisCell = $(this);
$thisCell.text(
eval($thisCell.attr('data-formula').replace('val', val.toString()))
)
});
} else {
$cells.text('ERROR')
}
});
});
You'll need:
a drop down option that allows the user to select what type of calculation they want to do and then display an input field OR multiple input fields
an input field for user input
a submit button with a onclick() event which passes your input into your calculation
(you may want to do some validation on this so they can only enter numbers)
validation examples
your Javascript file that takes the input from your box on submit and performs your calculation
display the information back to user... something like innerHtml to an element you've selected or:
var output = document.getelementbyid("your outputbox")
output.value = "";
output.value = "your calculated value variable";
Here is a tutorial for grabbing user input.
Assuming your calculations are all linear, I would suggest that you create an array of the coefficients and then just loop that array to do the calculation and print it out. Something like this:
HTML:
<table>
<tr>
<th></th>
<th>Recycled Cardboard</th>
<th>Re-usable Cardboard</th>
</tr>
<tr>
<th>Trees Saved</th>
<td></td><td></td>
</tr>
<tr>
<th>Acres Saved</th>
<td></td><td></td>
</tr>
<tr>
<th>Energy (in KW)</th>
<td></td><td></td>
</tr>
<tr>
<th>Water (in Gallons)</th>
<td></td><td></td>
</tr>
<tr>
<th>Landfill (Cubic Yards)</th>
<td></td><td></td>
</tr>
<tr>
<th>Air Pollution (in Lbs)</th>
<td></td><td></td>
</tr>
</table>
Javascript:
function showStats(cardboardTons) {
var elements = $("td");
var coeffs = [17, 34, 0.025, 0.5, 4100, 8200, 7000, 14000, 3, 6, 60, 120];
for(var i=0;i<coeffs.length;i++)
elemnts.eq(i).html(cardboardTons * coeffs);
}
Once you get input from the user, pass it into the showStats function as a number and it will go through all of the cells in the table and calculate the proper number to go in it.
I am trying to get my button selections to display in a table on my web application. Bellow you find the pieces of code that relate to my 1. My function which allows for the selections (may not even be relevant..), 2. the buttons which you can select in order to set the parameters, and 3 the table with class name and the rows where they will go. I've been struggling with this! Please Help!
My function:
function setClip(val)
{
clip=val;
}
function setZoom(val)
{
zoom=val;
}
function geoMap(val)
{
gmap=val;
}
function swap(imgNumber)
{
if(clip==true & zoom==false & gmap==false)
document.getElementById("default").src=imgNumber+"clip.jpg";
else if(clip==false & zoom==true & gmap==false)
document.getElementById("default").src=imgNumber+"zoom.jpg";
else if(clip==false & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"zoomp.jpg";
else if(clip==true & zoom==true & gmap==true)
document.getElementById("default").src=imgNumber+"clipzoomp.jpg";
else if(clip==true & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"clipp.jpg";
else if(clip==true & zoom==true & gmap==false)
document.getElementById("default").src=imgNumber+"clipzoom.jpg";
else if(clip==false & zoom==false & gmap==true)
document.getElementById("default").src=imgNumber+"p.jpg";
else
document.getElementById("default").src=imgNumber+".jpg";
}
My Buttons:
<input type ="button" id="button3" value="Apply Mask" onclick="setClip(true)">
<input type ="button" id="button3" value="No Mask" onclick="setClip(false)">
<input type="button" id="button3" value="Maintain Zoom In" onClick="setZoom(true)">
<input type="button" id="button3"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" id="button3" value="GeoMap On" onClick="geoMap(true)">
<input type="button" id="button3" value="GeoMap Off" onClick="geoMap(false)">
The table I would like my selections to be displayed in, basically I want the values of the selected buttons to but put in the table after they have been selected
<table class="status" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr>
</table>
I think your best bet here is using jQuery. It's far easier to manipulate than Javascript and was designed to easily manipulate objects. If you know CSS and a little Javascript, it's easy to pick up too. You don't even have to host it, as Google hosts it. All you need to do is add the following source code to the top where your scripts are:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
var buttonCount=1;
$(document).ready(function() {
$("input[type='button']").click(function() {
if(buttonCount <= 3) {
//make sure that there are no duplicates
if($(this).get(0).className != "buttonUsed")
{
$(this).get(0).className = "buttonUsed";
var htmlString = $(this).attr('value');
$('#sel' + buttonCount).html(htmlString);
buttonCount++;
}
}
});
});
... The rest of your script
I notice that you have been using IDs like one might use classes. I would advise you to consider using the class attribute for things like "button" and make IDs more unique. It will make it easier to code with Javascript, as JS usually follows IDs and works best if it targets only one element per ID. In any case I did rename your IDs. If you have CSS you can rename your CSS classes. Just note that in my code I renamed a class so that you can't choose more than one. That might work for you anyway, because then your button that has been used can look different from the unused buttons.
Anyway, here is the HTML, adapted:
<table class="status" id="buttonStatus" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr><tr>
<td width="200" align="center" id="sel1"> </td>
<td width="200" align="center" id="sel2"> </td>
<td width="200" align="center" id="sel3"> </td>
</tr>
</table>
</body>
Let me know if this works.
Update
To edit as you desire, use this:
$(document).ready(function() {
$("input[type='button']").click(function() {
//make sure that there are no duplicates
var buttonClassName = $(this).get(0).className;
if(buttonClassName != "buttonUsed")
{
var buttonID = $(this).attr('id');
var firstPart = buttonID.substring(0,6);
var secondPart = buttonID.substring(6,7);
var thirdPart = buttonID.substring(7);
var newThirdPart;
switch(thirdPart)
{
case "a" : newThirdPart = "b"; break;
case "b" : newThirdPart = "a"; break;
}
$(this).get(0).className = "buttonUsed";
$("#" + firstPart + secondPart + newThirdPart).get(0).className = "button";
var htmlString = $(this).attr('value');
$('#sel' + secondPart).html(htmlString);
}
});
});
And the HTML
<body>
<input type ="button" class="button" id="button1a" value="Apply Mask" onclick="setClip(true)">
<input type ="button" class="button" id="button1b" value="No Mask" onclick="setClip(false)">
<input type="button" class="button" id="button2a" value="Maintain Zoom In" onClick="setZoom(true)">
<input type="button" class="button" id="button2b"value="Maintain Full View" onClick="setZoom(false)">
<input type="button" class="button" id="button3a" value="GeoMap On" onClick="geoMap(true)">
<input type="button" class="button" id="button3b" value="GeoMap Off" onClick="geoMap(false)"><BR><BR><BR>
<table class="status" id="buttonStatus" height="50" width="800">
<tr>
<td width="200" align="center">Step 1 Selection</td>
<td width="200" align="center">Step 2 Selection</td>
<td width="200" align="center">Step 3 Selection</td>
</tr><tr>
<td width="200" align="center" id="sel1"> </td>
<td width="200" align="center" id="sel2"> </td>
<td width="200" align="center" id="sel3"> </td>
</tr>
</table>
</body>
Note on CSS
This JQuery changes the classname of the active button to buttonUsed, which means you can create a CSS to make the button look highlighted. If you'd rather not do that, and would rather have everything stay as button, you don't actually need it in the new example (whereas in my initial stab at it, it was very necessary).
$(document).ready(function() {
$("input[type='button']").click(function() {
//make sure that there are no duplicates
var buttonID = $(this).attr('id');
var secondPart = buttonID.substring(6,7);
var htmlString = $(this).attr('value');
$('#sel' + secondPart).html(htmlString);
});
});
Much simpler, in fact. At least I showed you the sort of things jQuery is capable of. Whether you choose to use it or not is up to you. Happy coding!
I'm trying to work this form so when the first radio button is selected, run a certain validation. When the second radio button is selected, run a different validation, etc. Currently using Alerts to check the functionality, but whichever radio button I choose I do not receive any feedback.
javascript function
<script type="text/javascript">
function validateDays() {
if (document.form1.radio1[0].checked == true) {
alert("You have selected Option 1");
}
else if (document.form1.radio1[1].checked == true) {
alert("You have selected Option 2");
}
else if (document.form1.radio1[2].checked == true) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
}
</script>
html input code
<input name="radio1" type="radio" value="option1" id="option1" onClick="validateDays();">
<input name="radio1" type="radio" value="option2" id="option2" onClick="validateDays();">
<input name="radio1" type="radio" value="option3" id="option3" onClick="validateDays();">
How do I get a different alert depending on which radio button is checked?
Eventually, each radio button will limit the number of checkboxes further down the form the user is able to select - which is why I cannot work this validation purely in to the onClick()
MORE FULL CODE - ON REQUEST
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
jQuery('#3daypass').click(function mattcode() {
jQuery('#other_2 , #other_3 , #other_4').prop('checked', true);
});
jQuery('#2daypass , #1daypass').click(function mattcode() {
jQuery('#other_2 , #other_3 , #other_4').prop('checked', false);
});
});
</script>
<script type="text/javascript">
function validateDays() {
if (document.getElementById('3daypass').checked) {
alert("You have selected Option 1");
}
else if (document.getElementById('2daypass').checked) {
alert("You have selected Option 2");
}
else if (document.getElementById('1daypass').checked) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
}
</script>
<tr>
<td colspan="5" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="65%" valign="top"><table width="100%" height="100%" border="0" cellpadding="2" cellspacing="0">
<tr valign="middle">
<td height="18" colspan="2" align="left" bgcolor="#000000"><span class="boxheader"><strong> Conference Pass</strong></span> <span class="bodycopyWhite"> - (Please select a day pass below)</span></td>
</tr>
<tr valign="middle">
<td colspan="2" align="left" bgcolor="#EBEBEB"><img src="spacer.gif" width="1" height="3"></td>
</tr>
<tr bgcolor="#EBEBEB">
<td align="center" valign="top" bgcolor="#EBEBEB"><table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td width="7%"><input name="other_1" type="radio" value="3daypass" id="3daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td width="93%" class="bodyNormal"><strong>Three-day</strong> open delegate pass</td>
</tr>
<tr>
<td><input name="other_1" type="radio" value="2daypass" id="2daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td class="bodyNormal"><strong>Two-day</strong> open delegate pass</td>
</tr>
<tr>
<td><input name="other_1" type="radio" value="1daypass" id="1daypass" onClick="Payment_Total(); check_code(); Vat_Total(); validateDays();"></td>
<td class="bodyNormal"><strong>One-day</strong> open delegate pass</td>
</tr>
</table></td>
</tr>
<tr valign="middle">
<td colspan="2" align="left" bgcolor="#EBEBEB"><img src="spacer.gif" width="1" height="3"></td>
</tr>
</table>
<br>
<table width="100%" border="0" cellspacing="0" cellpadding="2">
<tr>
<td height="20" colspan="2" bgcolor="#000000" class="boxheader"><strong> Please select the days you will be attending</strong></td>
</tr>
<tr>
<td width="9%" bgcolor="#EBEBEB"><input name="other_2" type="checkbox" id="other_2" value="Tues 5 Feb"></td>
<td width="91%" bgcolor="#EBEBEB" class="bodycopy">Tuesday 5 February 2013 </td>
</tr>
<tr>
<td bgcolor="#EBEBEB"><input name="other_3" type="checkbox" id="other_3" value="Wed 6 Feb"></td>
<td bgcolor="#EBEBEB" class="bodycopy">Wednesday 6 February 2013 </td>
</tr>
<tr>
<td bgcolor="#EBEBEB"><input name="other_4" type="checkbox" id="other_4" value="Thurs 7 Feb"></td>
<td bgcolor="#EBEBEB" class="bodycopy">Thursday 7 February 2013 </td>
</tr>
Apologies for the messy code - This was written in 2005 by someone else (with an apparent phobia of CSS) - see what I have to work with?!
function validateDays() {
if (document.getElementById("option1").checked == true) {
alert("You have selected Option 1");
}
else if (document.getElementById("option2").checked == true) {
alert("You have selected Option 2");
}
else if (document.getElementById("option3").checked == true) {
alert("You have selected Option 3");
}
else {
// DO NOTHING
}
}
You need to use == or === for comparison. = assigns a new value.
Besides that, using == is pointless when dealing with booleans only. Just use if(foo) instead of if(foo == true).
You must use the equals operator not the assignment like
if(document.form1.radio1[0].checked == true) {
alert("You have selected Option 1");
}
Full validation example with javascript:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Radio button: full validation example with javascript</title>
<script>
function send() {
var genders = document.getElementsByName("gender");
if (genders[0].checked == true) {
alert("Your gender is male");
} else if (genders[1].checked == true) {
alert("Your gender is female");
} else {
// no checked
var msg = '<span style="color:red;">You must select your gender!</span><br /><br />';
document.getElementById('msg').innerHTML = msg;
return false;
}
return true;
}
function reset_msg() {
document.getElementById('msg').innerHTML = '';
}
</script>
</head>
<body>
<form action="" method="POST">
<label>Gender:</label>
<br />
<input type="radio" name="gender" value="m" onclick="reset_msg();" />Male
<br />
<input type="radio" name="gender" value="f" onclick="reset_msg();" />Female
<br />
<div id="msg"></div>
<input type="submit" value="send>>" onclick="return send();" />
</form>
</body>
</html>
Regards,
Fernando
I have a sign up form on my site which works OK in IE but does not work in Firefox or Chrome. I have tried looking through other forum posts here with similar problems but still can't get my head round this silly problem. (I am not a code writer).
Here is the code
<script type="text/JavaScript">
function validate_form(){
{validation_text}
else{
return true;
}
}
var str_vars = '';
function all_fields(){
str_vars = '';
el = document.form1;
for (var i = 0; i < el.elements.length; i++) {
if (el.elements[i].value != '')
str_vars += el.elements[i].name+'='+el.elements[i].value+'&';
}
str_vars = str_vars.substr(0,str_vars.length-15);;
}
</script>
<div id="div_form" name="div_form">
<form id="form1" name="formx" method="{send_method}" action="{form_switch}">
<p> </p>
<table border="0" width="100%" style="border-collapse: collapse" bordercolor="#111111" cellpadding="0" cellspacing="0">
{error}
{signup_list}
<tr>
<td align="right">{description_country} </td>
<td>{shiping_country_list}{required_country}</td>
</tr>
<tr><td align="right"> {promo}</td></tr>
{code_signup}
<tr>
<td colspan="2"><div align="center">
<input name="terms" id="terms" value="1" type="checkbox">
<label for="terms">I accept the terms & conditions</label>
</div></td>
</tr>
<tr>
<td colspan="2"><div align="center">
{captcha}</td>
</tr>
{arp_fields}
<tr>
<td><div align="right">*</div><br></td>
<td width="332">Denotes required</td>
</tr>
<tr>
<td>
<div align="right">
<input name="Submit" value="Submit" type="button" onclick="{request}{request_email}{form2items}">
</div></td>
<td> <br></td>
</tr>
</table>
</form>
</div>
</div>
Any help would be appreciated.
Maybe instead of
el = document.form1;
try
el = document.getElementById('form1');
I can't see all the JS so it is hard to guess, but one other thing to try is to change the name of the submit button from name="Submit" to something else like name="submitForm". If form.submit() is getting called somewhere in the script this can cause problems.
Your validate function should look something like this:
function validate_form(){
var form = document.getElementById('form1');
err = 'The following fields are not correct filled:\n';
if (form.first_name.value == ''){
err += 'No First Name.\n';
}
if (emailCheck(form.email.value) == false){
err += 'No Valid email.\n';
}
if (form.terms.checked != true){
err += 'You did not agree with the terms.\n';
}
if (err != 'The following fields are not correct filled:\n'){
alert (err);
return false;
}
else{
return true;
}
}
Lastly, change your submit button to this:
<input name="Submit" value="Submit" type="button" onclick="if (validate_form()) document.getElementById('form1').submit();">
I am using a a href "Click Here" link in the page and if we click it will open a pop up contact form using javascript, here i need to get the value say like "id" into that popup from the a href so that i can manipulate the contact form,
Click Here
javascript function:
function showDiv(DisplayDiv) {
if (document.getElementById) { // DOM3 = IE5, NS6
if(document.getElementById("simpleMap"))
{
document.getElementById("simpleMap").style.visibility = 'hidden';
}
document.getElementById(DisplayDiv).style.visibility = 'visible';
}
else {
if (document.layers) { // Netscape 4
document.DisplayDiv.visibility = 'visible';
}
else { // IE 4
document.all.DisplayDiv.style.visibility = 'visible';
}
}
}
Popup Screen:
<div id="Showcase_10" style="visibility:hidden;">
<div id="fade"></div>
<div class="popup_block">
<div class="popup">
<form action='result.php' onSubmit="return valid()" method="post">
<input type="hidden" name="siteid" value="<? echo $_REQUEST['siteid']; ?>"> <table width="90%" bgcolor="#eff8ff" border="0" style="border:solid; border-width:1px; border-color:#ccc" align="center" cellpadding="2" cellspacing="3" class="small-content">
<tr><td width="6%"> </td>
<td colspan="2" align="left" class="subhead">Email Property Details</td>
</tr><tr><td width="6%"> </td><td class="cont">Request more information, make an appointment or ask a question. </td>
</tr>
<tr>
<td width="6%"> </td>
<td width="94%"><strong>Name</strong><br/>
<input name="name" type="text" class="field1" value=""/> <font color="#FF0000"><strong>*</strong></font></td></tr>
<tr>
<td width="6%"> </td>
<td width="94%"><strong>Your Email</strong><br />
<input name="email" type="text" class="field1" id="textfield2" value=''/> <font color="#FF0000"><strong>*</strong></font><br />
<font color="#FF0000" style="font-family: Verdana, sans-serif;font-size : 9pt;" class="form-list">
</font></td>
</tr>
<td colspan="2" align="center"></td>
</tr>
</table>
</form>
</div>
</div>
</div>
In Javascript:
window.open ("path/to/my/new/html/page.html?id=3","mywindow");
Just like any other page, the get can be used to pass the data you need, you just may need to UrlEncode it first.
EDIT: Oh. You're referring to a modal dialog, not a popup window. Well in that case, since the data will need to be on the page fully once the page loads that way the ID can be present in the link, you have 2 basic options: 1) preload all data for all click links and store it locally in javascript, 2) break this method into an ajax call and update the modal dialog controls with the ajax data.
1) For storing it in javascript, you could easy prototype your own pseudo-class to hold all of the data for each row, allowing you to store them in an associative array by id.
function myDataItem(id, field1) {
this.id = id;
this.field1 = field1;
this.field2 = ""; // initialize a property called field2
this.getInfo = getDataItemIno;
}
function getDataItemIno() {
return this.field1 + ' ' + this.field2;
}
var items;
items[3] = new myDataItem(3, "datastring");
2) The ajax solution would be a little more complex, and I would recommend using jQuery to build/handle all of those methods in order to keep it streamlined and simple.
The easiest way is to pass the id in the url of the popup window