creating a custom popup in javascript

When we create a popup using javascript, we can provide a list of options to customize the appearance of popup window. In the following files, a popup is created. In the popup window, user is provided with options to input values. When the user clicks on close button on popup, the values are written on the parent page html fields.

index.html

<!DOCTYPE html>
<html>
<head>
    <title>Untitled document</title>
  <meta charset="utf-8" />
<script language="javascript" type="text/javascript">

    function ShowPopup()
    {
        var myWindow = window.open("movies.html", "My Movies", "width=400,height=300, left=300, top=200, scrollbars");  

        // myWindow.document.write("This message is coming from parent window");
    }
</script>
   
</head>
<body>
Country: <input id="txtcountry" name="txtcountry" type="text" /><br />
<input id="btn" name="btn" type="button" value="Show Popup"
onclick="ShowPopup();" />
</body>
</html>

movies.html

<html>
<head>
<title>Movies</title>
    <script language="javascript" type="text/javascript">
        function ShowText(txt)
        {           
            window.opener.document.getElementById("txtcountry").value = txt;
        }
    </script>
</head>
<body>

    <table border="1">
        <tr>
        <td>
<a href="javascript:;" onclick="ShowText(this.innerHTML);">Pakistan</a>
         </td>
        </tr>
        <tr><td><a href="javascript:;"
   onclick="ShowText(this.innerHTML);">China</a></td></tr>
        <tr><td><a href="javascript:;"
   onclick="ShowText(this.innerHTML);">Iran</a></td></tr>
    </table>

    <input id="btnclose" name="btnclose" 
           type="button" value="Close" 
           onclick="window.close();" />
</body>
</html>

 

Add a Comment

Your email address will not be published. Required fields are marked *