Skip to main content

Floating windows for use as pop-ups, modal or separate sources of information in a user graphical interface.

Project description

Floating windows for use as pop-ups, modal or separate sources of information in a user graphical interface.

Detailed documentation is in the “docs” directory.

Quick start

  1. Add “floating_windows” to your INSTALLED_APPS setting like this:

    INSTALLED_APPS = (
        ...
        'floating_windows',
    )
  2. Add static files css/js:

    <link type="text/css" rel="stylesheet" href="{% static 'floating_windows/css/windows.css' %}">
    <script src="{% static 'floating_windows/js/windows.js' %}"></script>
  3. Create and add window(s) template(s) to the base template:

    <!-- Separate template "sign_in_modal.html" -->
    {% extends 'floating_windows/windows/default.html' %}
    
    {% block body_content %}
        <!-- window body -->
    {% endblock %}
    
    <!-- In base template -->
    {% include 'blocks/floating_windows/sign_in_modal.html' with fw_id='auth' %}
  4. You can load windows content dynamically through ajax, in this case, you need to add basic window template that will be used by the script to copy and create new windows:

    <!-- In base template -->
    {% include 'floating_windows/windows/default.html' %}
  5. Initialize windows script. For several windows with background on same page, which can display in same time, you must specify floatingWindowZIndex attribute for background and window correct display:

    const fw = new FloatingWindows();
    fw.config = {
        'fw-1': {
            'floatingWindowTitle': 'Title-1',
            'floatingWindowPosition': '125px,unset,unset,230px',
            'floatingWindowHideOnOutsideClick': true,             popup
            'floatingWindowShowFooter': false,
            'floatingWindowSetBackground': 'body',                background parent container (bcg of popups is ignoring)
            'floatingWindowZIndex': '200',                        set this attr to set windows hierarchy
            'floatingWindowSetToUrl': true,                       automatic window opening on page reload by
                                                                  get-parameter in address-bar
            'floatingWindowPushToHistory': true                   add window open/close events to browser history
        },
        ...
    }
    // etc. see code for thin setup
    fw.initWindows();
    
    $(document).on('floating-window:opened', function (event, window, trigger) {
        // tracking of signals about the opening of windows for loading content in them.
        // configure content load here
    });
  6. Setup trigger in template:

    <button type="button" data-floating-window-open="fw-1">
        Trigger
    </button>

Example:

https://user-images.githubusercontent.com/33987296/74094685-3af89000-4af6-11ea-995b-35b3b1820f4a.png

Project details


Download files

Download the file for your platform. If you're not sure which to choose, learn more about installing packages.

Source Distribution

btc-floating-windows-1.0.tar.gz (14.8 kB view details)

Uploaded Source

File details

Details for the file btc-floating-windows-1.0.tar.gz.

File metadata

  • Download URL: btc-floating-windows-1.0.tar.gz
  • Upload date:
  • Size: 14.8 kB
  • Tags: Source
  • Uploaded using Trusted Publishing? No
  • Uploaded via: twine/3.1.1 pkginfo/1.5.0.1 requests/2.22.0 setuptools/41.6.0 requests-toolbelt/0.9.1 tqdm/4.40.0 CPython/3.7.5

File hashes

Hashes for btc-floating-windows-1.0.tar.gz
Algorithm Hash digest
SHA256 9b092b651b032ffea15b12a4ccc2b5e351f2dd5d71451b59efe88f593b981d50
MD5 03428141e385048f227e22ea8314390b
BLAKE2b-256 ad2f14dc90e7d47a1046bfad725d5663b681b604c9799c441966604806da06a4

See more details on using hashes here.

Supported by

AWS AWS Cloud computing and Security Sponsor Datadog Datadog Monitoring Fastly Fastly CDN Google Google Download Analytics Microsoft Microsoft PSF Sponsor Pingdom Pingdom Monitoring Sentry Sentry Error logging StatusPage StatusPage Status page