Show modal if not logged in - php

Question

I'm trying to make a modal popup display allowing you to log in but only if you are not logged in.
I have tried many solutions but so far can only get the login to display in a new page.
Please see my code below
index.php
<?php
require 'database_connection.php';
if (!isset($_SESSION["type"])) {
echo "<script>$('#loginModal').modal('show');</script>";
}
require 'includes/header.php';
?>
***
***
if session type is
set code goes here
***
***
<div id="loginModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="product_form">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i class="fa fa-plus"></i> Add Product</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Stock Code</label>
<input type="text" name="product_name" id="product_name" class="form-control" required disabled />
</div>
<div class="form-group">
<label name="category_label" id="category_label">Category</label>
<select name="category_id" id="category_id" class="form-control" required>
<option value="">Select Category</option>
<?php echo fill_category_list($connect);?>
</select>
</div>
<div class="form-group">
<label>Enter Product Quantity</label>
<div class="input-group">
<input type="text" name="product_quantity" id="product_quantity" class="form-control" required pattern="[+-]?([0-9]*[.])?[0-9]+" placeholder="Enter Qty" />
<span class="input-group-addon">
<select class="form-control" name="product_unit" id="product_unit" required disabled>
<option value="Box">Boxes</option>
</select>
</span>
</div>
</div>
<div class="form-group">
<label>Location</label>
<input type="text" name="product_location" id="product_location" class="form-control" required disabled />
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="product_id" id="product_id" />
<input type="hidden" name="btn_action" id="btn_action" />
<input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
</div>
</div>
</form>
</div>
</div>
database_connection.php
<?php
$connect = new PDO('mysql:host=localhost;dbname=continental3', 'root', 'password');
session_start();
?>
What am I missing?
On a side note if there is an easier or better way of doing this I'm happy to change my approach
Any help would be greatly appreciated
** UPDATE**
<?php
require 'database_connection.php'; //checks session type is set or not
require 'includes/header.php'; // Loads css and js files
if (!isset($_SESSION["type"])) { //session check
echo '<script>$(document).ready(function(){$("#loginModal").modal("show");});</script>';
} //open modal
require 'function.php';
require 'includes/navbar.php';
?>
The above code shows the modal as expected but only after the page has loaded. removing the document ready function the modal does not load but the rest of the page loads and displays (presumably because I do not use the else condition. When using the else condition as seen below nothing loads.
<?php
require 'database_connection.php';
require 'includes/header.php';
if (!isset($_SESSION["type"])) { ?>
echo '<script>$(document).ready(function(){$("#loginModal").modal("show");});</script>';
<?php } else {
require 'function.php';
require 'includes/navbar.php';
?>
***
***
if session type is
set code goes here
***
***
<div id="loginModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="product_form">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i class="fa fa-plus"></i> Add Product</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Stock Code</label>
<input type="text" name="product_name" id="product_name" class="form-control" required disabled />
</div>
<div class="form-group">
<label name="category_label" id="category_label">Category</label>
<select name="category_id" id="category_id" class="form-control" required>
<option value="">Select Category</option>
<?php echo fill_category_list($connect);?>
</select>
</div>
<div class="form-group">
<label>Enter Product Quantity</label>
<div class="input-group">
<input type="text" name="product_quantity" id="product_quantity" class="form-control" required pattern="[+-]?([0-9]*[.])?[0-9]+" placeholder="Enter Qty" />
<span class="input-group-addon">
<select class="form-control" name="product_unit" id="product_unit" required disabled>
<option value="Box">Boxes</option>
</select>
</span>
</div>
</div>
<div class="form-group">
<label>Location</label>
<input type="text" name="product_location" id="product_location" class="form-control" required disabled />
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="product_id" id="product_id" />
<input type="hidden" name="btn_action" id="btn_action" />
<input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
</div>
</div>
</form>
</div>
</div>
<?php } #close else ?>

Answer 1

Where did you set $_SESSION['type'] ???
Please try this
index.php
<?php
require 'database_connection.php';
if (!isset($_SESSION["type"])) { ?>
<script> $('#loginModal').modal('show'); </script>";
<?php } else {
require 'includes/header.php';
?>
***
***
if session type is
set code goes here
***
***
<div id="loginModal" class="modal fade">
<div class="modal-dialog">
<form method="post" id="product_form">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><i class="fa fa-plus"></i> Add Product</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<div class="modal-body">
<div class="form-group">
<label>Stock Code</label>
<input type="text" name="product_name" id="product_name" class="form-control" required disabled />
</div>
<div class="form-group">
<label name="category_label" id="category_label">Category</label>
<select name="category_id" id="category_id" class="form-control" required>
<option value="">Select Category</option>
<?php echo fill_category_list($connect);?>
</select>
</div>
<div class="form-group">
<label>Enter Product Quantity</label>
<div class="input-group">
<input type="text" name="product_quantity" id="product_quantity" class="form-control" required pattern="[+-]?([0-9]*[.])?[0-9]+" placeholder="Enter Qty" />
<span class="input-group-addon">
<select class="form-control" name="product_unit" id="product_unit" required disabled>
<option value="Box">Boxes</option>
</select>
</span>
</div>
</div>
<div class="form-group">
<label>Location</label>
<input type="text" name="product_location" id="product_location" class="form-control" required disabled />
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="product_id" id="product_id" />
<input type="hidden" name="btn_action" id="btn_action" />
<input type="submit" name="action" id="action" class="btn btn-success" value="Add" />
</div>
</div>
</form>
</div>
</div>
<?php } #close else ?>
database_connection.php
<?php
$connect = new PDO('mysql:host=localhost;dbname=continental3', 'root', 'password');
session_start();
?>