Height of sign-up pop-up box div automatically increases after clicking OK of javascript alert when page reloads

Question

I have a sign-up link which when clicked a sign-up div pops up and after successful registration a javascript alert is produced saying "Registration Successful".. The problem is that when I click on ok the page reloads and then when I click on sign-up the height of the sign-up pop up div is automatically increased to the bottom of the page...

Signup pop-up div before javascript alert Signup pop-up div before javascript alert

Signup pop-up div after registration and after clicking ok of javascript alert Signup pop-up div after registration and after clicking ok of javascript alert

The login and sign-up page is in index.php...

config.php

<?php
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "shop";
try {
    $db = new PDO("mysql:host=$servername;dbname=$dbname", $username, $password);
    $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
}
catch (Exception $ex) {
    echo "Error: ".$ex->getMessage();
    die();
}

The php script for registration

<?php
session_start();
include 'config/config.php';
if(isset($_POST['register'])){
    $name=$_POST['name'];
    $email=$_POST['email'];
    $mobile=$_POST['mobile'];
    $password=$_POST['password'];
    $query = $db->prepare("SELECT email FROM user_info WHERE email= ?");
    $query->execute(array($email));
    if($query->rowCount()>0){
        echo '<script type="text/javascript">alert("Sorry Email already exist");</script>';
    }
    else{
    $query = $db->prepare("SELECT mobile FROM user_info WHERE mobile= ?");
    $query->execute(array($mobile));
    if($query->rowCount()>0){
        echo '<script type="text/javascript">alert("Sorry Phone Number already exist");</script>';
    }
    }
    $query = $db->prepare("INSERT INTO user_info(name, email, mobile, password) VALUES(?, ?, ?, ?)");
    $query->execute(array($name, $email, $mobile, $password));
    echo '<script type="text/javascript">alert("Registration Successful");</script>';
}
?>

The html form

<div id="small-dialog2" class="mfp-hide agileinfo">
                        <div class="pop_up">
                                                    <form action="<?php $_SERVER['PHP_SELF']; ?>" method="post">
                                <h3>SIGN UP</h3>
                                <input type="text" name="name" placeholder="Name" required="">
                                                                <input type="email" name="email" placeholder="Email" title="Please feed in a correct email id" required="">
                                                                <input type="number" name="mobile" placeholder="Phone Number" pattern="[789][0-9]{9}" title="Your mobile number must have atmost 10 digits." required="">
                                                                <input type="password" Name="password" placeholder="Password" pattern=".{6,20}" title="Your password must have a length between 6 to 20 charecters." required="">
                                <div class="send-button wthree agileits">
                                                                    <input type="submit" name="register" value="SIGN UP">
                                </div>
                            </form>

                        </div>
                    </div> 

The css for popup

div#small-dialog1, div#small-dialog2, div#small-dialog3, div#small-dialog4 {
            padding: 30px;
            width: 20%;
            height: 100%;
            margin: 0 auto;
            background: #F5F5F5;
        }