Skip to content
Advertisements

Basic Popup Boxes

main code

 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <style>
        body{
            margin:0;
            padding:0;
            font-family:Verdana;
            background:#b88c00
        }
        .box{
            position:absolute;
            top:50%;
            left:50%;
            transform:translate(-50%,-50%)
        }
        .tog{
            padding:5px;
            border:2px solid #000;
            width:150px;
            margin:10px;
            cursor:pointer;
            transition:.5s;
        }
        .tog:hover{
            background:#000;
            color:#fff;
        }
    </style>
</head>
<body>

    <div class="box">
        <div class="tog" id="openWindow">Open Window</div>
        <div class="tog" id="closeWindow">Close Window</div>
    </div>

    <script>

        var Wopen = document.getElementById("openWindow"),
            Wclose = document.getElementById("closeWindow"),
            settings = "width=500px,height=500px,top=200px,left=200px,resizable=no";

        Wopen.onclick = function () {
            Mywindow = window.open("1.page.html", "examplePage", settings)
        }
        Wclose.onclick = function () {
            Mywindow.close();
        }


        //var pencere = window.open('2.page.html', 'orneksayfa', 'width=600,height=600')
        //pencere.focus()
        //pencere.onload = function () {
        //    var h1 = pencere.document.createElement('h1')
        //    h1.innerHTML = ' TEST SAYFASINA H1 ETİKETİNİ YAZDIRDIM'
        //    h1.style.color = 'red';
        //    pencere.document.body.insertBefore(h1, pencere.document.body.firstChild)
        //}

    </script>

</body>
</html> 

1.page.html

<!DOCTYPE html>

<html>
<head>
    <meta charset="utf-8" />
    <title>page</title>
    <link rel="stylesheet" type="text/css" href="1.page.css">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
</head>
<body>  
    
        <h3>Registration form</h3>
        <table>
            <tr>
                <td class="left">Name</td>
                <td class="right"><input type="text" name="name" /></td>
            </tr>
            <tr>
                <td class="left">Surname</td>
                <td class="right"><input type="text" name="surname" /></td>
            </tr>
            <tr>
                <td class="left">Email</td>
                <td class="extra"><input type="email" name="email" />
                    <select>
                        <option>hotmail.com</option>
                        <option>gmail.com</option>
                        <option>mynet.com</option>
                        <option>outlook.com</option>
                    </select></td>
            </tr>
            <tr>
                <td class="left">phone number</td>
                <td class="right"><input type="number" name="phone_number" /></td>
            </tr>
            <tr>
                <td class="left">Password</td>
                <td class="right"><input type="password" name="Password" /></td>
            </tr>
        </table>

</body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: