{"id":17772585,"url":"https://github.com/jamesplease/backbone.overlay-view","last_synced_at":"2026-03-11T10:06:25.814Z","repository":{"id":35876626,"uuid":"40161885","full_name":"jamesplease/backbone.overlay-view","owner":"jamesplease","description":"A view that covers the app and emits click events.","archived":false,"fork":false,"pushed_at":"2015-08-06T04:03:27.000Z","size":244,"stargazers_count":4,"open_issues_count":1,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2026-01-26T18:48:36.771Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jamesplease.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-04T03:42:02.000Z","updated_at":"2017-03-15T21:46:39.000Z","dependencies_parsed_at":"2022-08-31T02:20:47.925Z","dependency_job_id":null,"html_url":"https://github.com/jamesplease/backbone.overlay-view","commit_stats":null,"previous_names":["jmeas/backbone.overlay-view","jmeas/marionette.overlay-view"],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/jamesplease/backbone.overlay-view","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fbackbone.overlay-view","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fbackbone.overlay-view/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fbackbone.overlay-view/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fbackbone.overlay-view/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jamesplease","download_url":"https://codeload.github.com/jamesplease/backbone.overlay-view/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jamesplease%2Fbackbone.overlay-view/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30237329,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T23:24:20.706Z","status":"ssl_error","status_checked_at":"2026-03-07T23:21:10.486Z","response_time":53,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-26T21:39:53.404Z","updated_at":"2026-03-07T23:31:53.640Z","avatar_url":"https://github.com/jamesplease.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# backbone.overlay-view\n\nA view that covers your webpage, and is closed when clicked. It's useful as a background for\ndropdowns, modals, etc.\n\n[![Travis build status](http://img.shields.io/travis/jmeas/backbone.overlay-view.svg?style=flat)](https://travis-ci.org/jmeas/backbone.overlay-view)\n[![Code Climate](https://codeclimate.com/github/jmeas/backbone.overlay-view/badges/gpa.svg)](https://codeclimate.com/github/jmeas/backbone.overlay-view)\n[![Test Coverage](https://codeclimate.com/github/jmeas/backbone.overlay-view/badges/coverage.svg)](https://codeclimate.com/github/jmeas/backbone.overlay-view)\n[![Dependency Status](https://david-dm.org/jmeas/backbone.overlay-view.svg)](https://david-dm.org/jmeas/backbone.overlay-view)\n[![devDependency Status](https://david-dm.org/jmeas/backbone.overlay-view/dev-status.svg)](https://david-dm.org/jmeas/backbone.overlay-view#info=devDependencies)\n\n### Installation\n\nThe easiest way to install this is through `npm` or `bower`.\n\n```js\nnpm install backbone.overlay-view\nbower install backbone.overlay-view\n```\n\nBe sure to include both the JS and CSS files in your application.\n\n### Motivation\n\nA common UI feature in client side applications is an element that blocks the\nuser from interacting with the rest of the application. This is typically used when\nthe user opens, say, a custom dropdown menu or a modal.\n\nRather than associating a new overlay with each dropdown, I like to use a single view\nthat any other view in my app can utilize.\n\n### Basic Usage\n\n```js\n// Create a single overlayView for your entire app\nvar overlayView = new Backbone.OverlayView();\n\n// Display it\noverlayView.display();\n\n// When the user clicks on it, it will hide itself and emit the `hide` event.\n// You can use that event to close the modal / dropdown / do whatever.\n```\n\n### Child Views\n\nUsing nested views within the OverlayView is common practice. I recommend that you\nstick to existing DOM APIs to append another View's element into the OverlayView's\nelement. Then, when the OverlayView is hidden, you can destroy the nested view.\n\nThis might look something like:\n\n```js\n// Attach the dropdown element to the overlay view\noverlayView.$el.append(dropdownView.$el);\n\n// Destroy the dropdown when the overlayView is hidden\ndropdownView.listenToOnce(overlayView, 'hide', dropdownView.destroy);\n\n// Show the overlay view\noverlayView.display();\n\n// Click the overlay to destroy the dropdown.\n```\n\n### Methods\n\n##### `isDisplaying()`\n\nReturns a Boolean indicating whether or not the view is currently displaying. By\ndefault, the view is not displaying.\n\n##### `display()`\n\nDisplay the view, if it isn't already displayed, by removing the\n`.overlay-view-hidden` class.\n\nReturns the view instance.\n\n##### `hide()`\n\nHide the view, if it's being displayed, by adding the `.overlay-view-hidden`\nclass.\n\nReturns the view instance.\n\n### Events\n\n##### `before:display`\n\nTriggered just before the view is displayed.\n\n##### `display`\n\nTriggered just after the view is displayed.\n\n##### `before:hide`\n\nTriggered just before the view is hidden.\n\n##### `hide`\n\nTriggered just after the view is hidden.\n\n##### `click`\n\nTriggered when the user clicks the view itself, but not a child of the view. It's\ngenerally safer to use the `hide` event to track when the overlay closes, because it\nmay not always close due to a click (for instance, when the user completes the task\noffered by the modal / dropdown).\n\n##### `click:child`\n\nTriggered when the user clicks a descendant element of the view.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Fbackbone.overlay-view","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjamesplease%2Fbackbone.overlay-view","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjamesplease%2Fbackbone.overlay-view/lists"}