Welcome my friends again, I am really glad to write to you and share my thoughts with you, in this tutorial we will learn how to make a newsletter popup form with codeigniter and bootstrap, and the flow will be like this:

- User will enter the site ,then we check if there is a JavaScript cookie (ModalShown) set, if found it will appear a clear cookie button, if not found it will wait 3 seconds then appear  the bootstrap modal popup  form

- IF he take and action like (close form, submit form) the modal will disappear, the Ajax request send, the JavaScript cookie set, and the clear cookie button will appear.

- IF the user not take any action like click outside the modal form, it will disappear and will appear again for each refresh in the page.

- IF you click on clear cookie it will remove the cookie and if you refresh the page the popup will appear again.

Now, how to actually add this code to our project, it is very easy, just follow these steps:

Step one

Create newsletter table schema

CREATE TABLE ci_newsletter(
id INT(11) AUTO_INCREMENT PRIMARY KEY,
`email` varchar(50) DEFAULT NULL
)ENGINE=InnoDB DEFAULT CHARSET=utf8;

Step two

Create newsletter controller and add 

index function to load the form

create function to your controller which is responsible for insert the email that posted by the Ajax request into newsletter table

<?php
	if(!defined('BASEPATH'))
		exit('No direct script access allowed');

	class Newsletter extends CI_Controller
	{

		public function __construct()
		{
			parent::__construct();
		}

        function index(){
		    $this->load->view('content/newsletter_form');
        }
		public function add_new(){
            $email = $this->input->post("email");
            header('Content-Type: application/x-json; charset=utf-8');
            $this->db->set('email',"$email");
            $this->db->insert('ci_newsletter');
            $insert = $this->db->insert_id();
            echo(json_encode($insert));
        }


	}

Step three

Add a newsletter_form file under views directory and load it anywhere within body tag

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.1.3/js.cookie.min.js"></script>
<div class="container">
    <h2>Modal Example</h2>
    <!-- Modal -->


    <div id="container">
        <button class="button clear-cookie">Clear Cookie</button>
    </div>

    <div class="modal fade" id="modal-content" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">New message</h4>
                </div>
                <div class="modal-body">
                    <form>
                        <div class="form-group">
                            <label for="yurEmail" class="control-label">Recipient:</label>
                            <input placeholder="example@email.com" class="form-control" id="yurEmail" name="email" type="email" value="">
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default close2" data-dismiss="modal">Close</button>
                    <button id="newsletter" type="submit" class="btn btn-primary subscribed">Subscribe Button</button>
                </div>

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

<script>
    // modal and cookie js
    $(".clear-cookie").on("click", function() {
        Cookies.remove('ModalShown');
        $(this).replaceWith("<p><em>Cookie cleared. Re-run demo</em></p>");
    });

    $(".subscribed,.close,.close2").on("click", function() {
        $('#modal-content').modal('hide');
        Cookies.set('ModalShown', 'yes', {  expires: 1});
        $(".clear-cookie").fadeIn();
        lastFocus.focus();
    });


    var lastFocus;
    var popupShown = Cookies.get('ModalShown');

    if (popupShown) {
        console.log("Cookie found. No action necessary");
        $(".clear-cookie").show();
    } else {
        console.log("No cookie found. Opening popup in 3 seconds");
        $(".clear-cookie").hide();
        setTimeout(function() {
            lastFocus = document.activeElement;
            $('#modal-content').modal('show');
            $("#yurEmail").focus();
        }, 3000);
    }

/// ajax post request
    $(document).ready(function () {

        $("#newsletter").click(function(e) {
            e.preventDefault();
            var email = $("#yurEmail").val();
            var post_url = "<?= site_url('newsletter/add_new/') ?>";
            $.ajax({
                type: "POST",
                url: post_url,
                data : {"email" : email},
                dataType: "json",
                success: function (data) {
                    console.log(data);
                }
            });

        });

    });

</script>
</div>

Step four

Now go to the browser and run http://codeigniter_newsletter/

Demo Link