35 – SETTING UP MODAL & BACKGROUND IMAGE – STOCK MANAGEMENT SYSTEM

In this video, we will show you how to add backgroud image to the application, fade in effect and fake loader in your application. In the dome video, you will notice the application fades in when loading pages.

There is also a version button which when clicked, opens a modal with system information as the content of the modal page.

1. ADDING A BACKGROUD IMAGE

This is done in css.

i. Copy the background image is img folder inside located in static folder.

ii. Open stylesheet.css and paste in this code below then refresh your application while holding the ctrl key on the keyboard

body {
    background-image: url("../img/bg.jpg");
}

2. ADDING MODAL PAGE

We want the version to be shown on all pages of the application. Add the modal page content to the navbar since it’s visible on all pages.

<a href="#"><div id="version-display" data-toggle="modal" data-target="#myModal">SMIS Ver: 1.0</div></a>
  <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
          <!-- Modal content-->
            <div class="modal-content">
              
                <div class="modal-header">
                    <!-- <button type="button" class="close" data-dismiss="modal">&times;</button> -->
                    <h4 class="modal-title">System Information</h4>
                </div>
                
                <div class="modal-body">
                    <div class="dev-info">
                      <p class=""><b>STOCK MANAGEMENT INFORMATION SYSTEMS</b></p>
                      <p>VERSION: 1.O</p><br>

                      <p class="modal-header">DEVELOPER:</p>
                      <p>Arbcoms</p>
                      <p>4444444</p>
                      <p><img src="/static/img/logo.png" alt="Developer Logo"></p>             
                    </div>
                </div>

                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>

            </div>
      </div>
  </div>

MODAL CSS

Apply this css to style the Modal and appy the animation when the button is clicked

/* Version Button */
#version-display{
    background-color: #e61c66;
    color: white;
    box-shadow: 5px 12px 12px #2e6da4;
    text-align: center;
    display: inline;
    font-weight: bolder;
    padding: 15px;
    position: fixed;
    top: 40px;
    left: -5px;
    z-index: 3000;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
}



 /* Modal Header */
.modal-header {
    padding: 2px 16px;
    background-color: #e61c66;
    color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
    padding: 2px 16px;
    background-color: #e61c66;
    color: white;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 100%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);

}


.dev-info{
    width: 50%;
    text-align: center;
    font-family: helvetica;
    font-weight: bold;
    display: inline;
}

.dev-info-logo{
    width: 50px;
    float: left;
}