codehaven - php snippets - coding help
Generic filters
Exact matches only
    • octopus energy discount code

    Popup Overlay – Modal type centered

    15th June 2014

    Jquery - Modals

    jquery icon

    A simple way to display a modal.
    Good alerts!

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
     
    <div class="overlay"></div>
    <div class="popup">budget is changing </div>
    <p>Click anywhere to toggle overlay</p>
     
      <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
     
      <script>
      $(document).ready(function(){
      $("body").click(function(){
        $(".overlay, .popup").fadeToggle();
           });
      });
      </script>
     
    <style type="text/css">
    html,
    body {
        height: 100%;
    }
    .overlay {
    position:absolute;
    display:none;
     
        /* color with alpha transparency */
        background-color: rgba(0, 0, 0, 0.8);
     
        /* stretch to screen edges */
        top: 0;
    left: 0;
        bottom: 0;
        right: 0;
    }
    .popup {
        position: absolute;
        width: 300px;
        height: 150px;
        display: none;
        background-color: white;
        text-align: center;
     
        /* center it ? */
        top: 50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -75px;
    }
    </style>
     

    Was this code snippet helpful?

    RSS Latest Snippets
    LINKS
    A Repository of Code Snippets in many Programming Languages:-

    PHP – JQUERY
    CSS – MYSQL
    WORDPRESS – JAVASCRIPT
    WOOCOMMERCE – HTML

    © 2022 CODEHAVEN