Home/ Questions/Q 9042593
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T10:32:06+00:00

I want to make a screen effect like when you push a button, a

  • 0

I want to make a screen effect like when you push a button, a dialog will appear into the center and the rest of the space will become darker with opacity.

A example will be like the Modal of Boostrap when you click its butoon.

http://twitter.github.com/bootstrap/javascript.html

My understand is to show an element we can simply use .dialog() or etc, the screen effect should be another function used inside of .dialog() or etc.

I want to know, how or what function they are using for this specific screen effect???? I will appreciate that I will have a script example. Thank you very much.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Basically, this is done by overlaying a div on top of all of the current screen elements, and setting its background to black and its opacity to 50%-75%. Then on top of that, centering another div that has your “modal” content in it.

    I would recommend using a library like KendoUI, ExtJS, JQueryUI, etc., but they will all do something similar to the following quick and dirty demo:

    <!DOCTYPE html>
<html>
<head>
    <title>Demo</title>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script>
        $(function () {
            $('#button').click(function () {
                var blackOverlay = $('<div/>')
                    .attr('id', 'overlay')
                    .css({
                        'position': 'absolute',
                        'width': '100%',
                        'height': '100%',
                        'background-color': 'black',
                        'top': 0,
                        'left': 0,
                        'z-index': 1001,
                        'opacity': .75
                    });

                var modalContent = $('<div/>')
                    .css({
                        'z-index': 1002,
                        'background-color': 'white',
                        'display': 'inline-block',
                        'width': 300,
                        'height': 150,
                        'margin-left': 400,
                        'margin-top': 400
                    })
                    .html('This is the modal content.<br/>');

                var okayButton = $('<input/>')
                    .attr('type', 'button')
                    .attr('value', 'OK')
                    .click(function () {
                        blackOverlay.remove();
                    });

                modalContent.append(okayButton);

                blackOverlay.append(modalContent);

                $('body').append(blackOverlay);
            });
        });
    </script>
</head>
<body>
    Here is some content.<br />
    Here is some content.<br />
    Here is some content.<br />
    Here is some content.<br />
    Here is some content.<br />
    Here is some content.<br />
    Here is some content.<br />
    Here is some content.<br />
    Here is some content.<br />
    Here is some content.<br />
    <input id="button" type="button" value="Click Me" />
</body>
</html>
    • 0