Solved

i want to display a popup on centered of the window when i click on a button in header.in codeigniter

Posted on 2016-09-07
6
33 Views
Last Modified: 2016-10-25
i have a notification table in my database..when admin post a notification that notification will be displayed on the header with count..when user click on that button a popup will be apperaed on the centered of the window with the view  details of that notification..
0
Comment
Question by:bharathi reddy
6 Comments
 
LVL 51

Assisted Solution

by:Julian Hansen
Julian Hansen earned 166 total points
ID: 41789233
There are many options for displaying a popup but it requires HTML / CSS / JavaScript/ jQuery skills - not PHP. PHP is the server side scripting tool that produces the resulting HTML and JS that renders in the browser.

Bootstrap has a modal popup (if you are using Bootstrap)
http://getbootstrap.com/javascript/#modals

Failing that you have JQueryUI
http://jqueryui.com/dialog/

FancyBox
http://fancybox.net/

All of them will do what you need - all have good examples out there of how to implement a popup.
1
 
LVL 108

Assisted Solution

by:Ray Paseur
Ray Paseur earned 166 total points
ID: 41789320
Maybe get some hands on help?  Consider E-E Gigs!

Here's an example of a popup video window; it should help you get some ideas.
https://iconoun.com/demo/popup_video_example.php
<!DOCTYPE html>
<!-- https://www.experts-exchange.com/questions/28964572/Is-there-a-way-I-can-make-this-alert-a-little-more-pretty.html
<!-- https://iconoun.com/demo/popup_video_example.php
<!-- http://www.w3schools.com/js/js_output.asp
  -->
<html dir="ltr" lang="en-US">
<head>

<meta charset="utf-8" />
<meta name="robots" content="noindex, nofollow" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Experimental Popup / Overlay Video</title>

<style type="text/css">
/* TRANSLUCENT OVERLAY GRAYS-OUT THE VIEWPORT */
.spw_overlay {
    width: 100%;
    background: rgba(0,0,0,.6);
    position: absolute;
    left: 0;
    top: 0;
}

/* CONTAINER FOR THE VIDEO - ROUNDED CORNERS */
.spw_videobox {
    position: absolute;
    background: white;
    text-align: center;
    padding: 20px;
    border-radius: 5px;
}

/* THE VIDEO INSIDE THE VIDEO BOX CONTAINER */
.spw_videobox video {
    width: 640px;
}

/* SMALL CIRCLE-X AT UPPER RIGHT OF VIDEOBOX - IE CANNOT USE CLEAR-TEXT SVG; REQUIRES BASE64_ENCODE() */
.spw_close {
    width: 24px;
    height: 24px;
    position: absolute;
    top: -12px;
    right: -12px;
    display: block;
    border-radius: 12px;
 /* background: white url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text x="5" y="18" font-size="18" font-family="verdana" font-weight="bold" fill="gray">X</text></svg>') no-repeat center center; */
    background: white url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUiIHk9IjE4IiBmb250LXNpemU9IjE4IiBmb250LWZhbWlseT0idmVyZGFuYSIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9ImdyYXkiPlg8L3RleHQ+PC9zdmc+') no-repeat center center;
}
.spw_close:hover {
    cursor: pointer;
 /* background: gray url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text x="5" y="18" font-size="18" font-family="verdana" font-weight="bold" fill="white">X</text></svg>') no-repeat center center; */
    background: gray url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjx0ZXh0IHg9IjUiIHk9IjE4IiBmb250LXNpemU9IjE4IiBmb250LWZhbWlseT0idmVyZGFuYSIgZm9udC13ZWlnaHQ9ImJvbGQiIGZpbGw9IndoaXRlIj5YPC90ZXh0Pjwvc3ZnPg==') no-repeat center center;
}
</style>

</head>

<body>
<div class="wrapper">
  <header>
    <div class="container">
    <h1 class="col-lg-9">Video Windows</h1>
    </div>
  </header>
  <div class="container">
  <p>Click on the link below to view video and description in a popup</p>

    <ul>
      <li><a class="spw_video-link" href="http://techslides.com/demos/sample-videos/small.mp4" data-description="This is the description for sample video #2">HTML5 Video 2</a></li>
      <li><a class="spw_iframe-link" href="https://www.youtube.com/embed/zr9leP_Dcm8?autoplay=1" width="620" height="315" data-description="This is the YouTube video #3">Youtube Iframe embed</a></li>
    </ul>

  </div><!-- /container -->
</div><!-- /wrapper -->
<footer>
</footer>

<script src="https://code.jquery.com/jquery.js"></script>

<script>
$(function(){

    // ESCAPE KEY WILL REMOVE THE OVERLAY
    $(document).on('keyup',function(e){
        if (e.keyCode == 27) {
            $('.spw_overlay').remove();
        }
    });

    // CLICK ON THE OVERLAY OR CLOSE BUTTON BODY WILL REMOVE THE OVERLAY
    $('body').on('click', '.spw_overlay, .spw_close', function(){
        $('.spw_overlay').remove();
    });

    // CLICK ON THE VIDEOBOX ONLY AFFECTS VIDEOBOX: http://www.w3schools.com/JQuery/event_stoppropagation.asp
    $('body').on('click','.spw_videobox', function(e){
        e.stopPropagation();
    });

    // FOR HTML5 VIDEO TAGS
    $('.spw_video-link').click(function(e){
        var el = $(this);

        // TURN OFF THE EXPECTED ACTION (REDIRECT BROWSER TO LINK)
        e.preventDefault();

        // CREATE THE VBOX DOM ELEMENT
        var vbox =  $('<div/>').addClass('spw_videobox');

        // ADD CLOSE-LINK, VIDEO BOX, AND DESCRIPTION
        vbox.append($('<a/>').addClass('spw_close'));
        vbox.append($('<video/>').prop({autoplay: true, controls: true}).attr('src', el.attr('href')));
        vbox.append($('<div/>').html(el.data('description')));

        // GRAY OUT THE BODY, THEN ADD THE VBOX DOM ELEMENT
        $('body').append(
            $('<div class="spw_overlay"/>').height(Math.max($(document).height(), $(window).height()))
            .append( vbox ) );

        // POSITION THE VBOX NEAR THE TOP CENTER
        var left = ($(window).width() - vbox.width()) >> 1;
        var top  = $(window).scrollTop() + 50;
        vbox.css({
            left: left + 'px',
            top: top + 'px'
        });
    });

    // FOR IFRAME EMBEDDING
    $('.spw_iframe-link').click(function(e){
        var el = $(this);

        // TURN OFF THE EXPECTED ACTION (REDIRECT BROWSER TO LINK)
        e.preventDefault();

        // CREATE THE FBOX DOM ELEMENT
        var fbox =  $('<div/>').addClass('spw_videobox');

        // ADD CLOSE-LINK, IFRAME, AND DESCRIPTION
        fbox.append($('<a/>').addClass('spw_close'));
        fbox.append($('<iframe/>').attr('src', el.attr('href')).attr('width', '640').attr('height', '360'));
        fbox.append($('<div/>').html(el.data('description')));

        // GRAY OUT THE BODY, THEN ADD THE FBOX DOM ELEMENT
        $('body').append(
            $('<div class="spw_overlay"/>').height(Math.max($(document).height(), $(window).height()))
            .append( fbox ) );

        // POSITION THE FBOX NEAR THE TOP CENTER
        var left = ($(window).width() - fbox.width()) >> 1;
        var top  = $(window).scrollTop() + 50;
        fbox.css({
            left: left + 'px',
            top: top + 'px'
        });
    });
});
</script>

</body>
</html>

Open in new window

0
 
LVL 24

Accepted Solution

by:
lenamtl earned 168 total points
ID: 41794004
Hi,

Bootstrap Modal will appear by default centered.

button code:
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch Modal
</button>

Open in new window


modal code:
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
  <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="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save</button>
      </div>
    </div>
  </div>
</div>

Open in new window

0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now