{"id":17069799,"url":"https://github.com/jlong/popupjs","last_synced_at":"2025-10-19T14:51:23.722Z","repository":{"id":402088,"uuid":"20461","full_name":"jlong/popupjs","owner":"jlong","description":"A prototype/lowpro based Facebook-style windowing solution","archived":false,"fork":false,"pushed_at":"2017-05-17T20:11:13.000Z","size":112,"stargazers_count":58,"open_issues_count":1,"forks_count":12,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-03-26T12:46:14.713Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","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/jlong.png","metadata":{"files":{"readme":"README.markdown","changelog":null,"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":"2008-05-29T14:32:49.000Z","updated_at":"2019-08-13T13:25:25.000Z","dependencies_parsed_at":"2022-07-07T14:41:02.850Z","dependency_job_id":null,"html_url":"https://github.com/jlong/popupjs","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlong%2Fpopupjs","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlong%2Fpopupjs/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlong%2Fpopupjs/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jlong%2Fpopupjs/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jlong","download_url":"https://codeload.github.com/jlong/popupjs/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248610753,"owners_count":21132990,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","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-14T11:27:53.073Z","updated_at":"2025-10-19T14:51:18.663Z","avatar_url":"https://github.com/jlong.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"PopupJS\n=======\n\nPopupJS is a simple Prototype-based library for creating Facebook-like popup\nwindows and dialogs. It leverages Dan Webb's excellent Low Pro library to\nallow you to unobtrusively create popup windows with a minimal amount of code.\n\n\u003cimg src=\"/downloads/jlong/popupjs/popup.png\" alt=\"popup window\" /\u003e\n\nDependencies: prototype.js, dragdrop.js, effects.js, lowpro.js\n\nLearn More: \u003chttp://github.com/jlong/popupjs\u003e\n\nCopyright (c) 2008-2011, John W. Long  \nPortions copyright (c) 2008, Five Points Solutions, Inc.\n\n\nInstallation\n------------------------------------------------------------------------------\n\nPopupJS depends on [Prototype][1], [Scriptaculous][2], and [Low Pro][3]. To\nuse PopupJS you will need to download and install them in the appropriate\ndirectory on your web server and reference them with _script_ tags in the\n_head_ portion of your HTML document:\n\n    \u003cscript type=\"text/javascript\" src=\"/javascripts/prototype.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" src=\"/javascripts/effects.js\"\u003e\u003c/script\u003e\n    \u003cscript type=\"text/javascript\" src=\"/javascripts/dragdrop.js\"\u003e\u003c/script\u003e \n    \u003cscript type=\"text/javascript\" src=\"/javascripts/lowpro.js\"\u003e\u003c/script\u003e\n\nAfter including all of the dependencies in your HTML document, don't forget to\ninclude PopupJS:\n\n    \u003cscript type=\"text/javascript\" src=\"/javascripts/popup.js\"\u003e\u003c/script\u003e\n\nThere are also a number of images included in the distribution. You should\ninstall these in your \"images\" folder on your web server.\n\nPopupJS expects you to style the contents of your popup windows yourself. The\ncontents of a popup window includes the titlebar, buttons, etc. If you are\nlooking for some basic styles to get you started, check out \"facebook.css\" in\nthe distribution.\n\n\nLow Pro Behaviors\n------------------------------------------------------------------------------\n\nPopupJS makes heavy use a custom Low Pro behavior that makes it easy to\n[unobtrusively][4] attach the popup functionality to the DOM. \n\nIf you are not familiar with Low Pro and unobtrusive javascript, check out\nthis article on Dan Webb's blog:\n\n* [Low Pro: Unobtrusive Scripting For Prototype][5]\n\n\nUsing the Trigger Behavior\n------------------------------------------------------------------------------\n\nThe Popup.Trigger behavior allows you to open up any div or URL inside of a\nFacebook-style window. To use it you must install the behavior using\nLow Pro's friendly _addBehavior_ function:\n\n    Event.addBehavior({\n      'a.popup': Popup.TriggerBehavior()\n    });\n\nThe code above associates all links with a class of \"popup\" with the\nPopup.TriggerBehavior. This allows you to create a popup link like this:\n\n    \u003ca class=\"popup\" href=\"window.html\"\u003ePopup\u003c/a\u003e\n\nThe link above will use Ajax to open the contents of \"window.html\" in a\nFacebook-like popup window. Note that the contents of \"window.html\" will be\ninserted directly into the DOM. Don't include the normal HTML _head_ and\n_body_ tags in the window document, just include the snippet of HTML that\nshould be inserted.\n\nIf you would like to store the contents of your windows on the same page,\nplace it in a hidden div:\n\n    \u003cdiv id=\"hello\" class=\"popup\" style=\"hidden\"\u003eHello World\u003c/div\u003e\n\nIn your popup link, set the _href_ attribute of the link to the ID of the div\nlike this:\n\n    \u003ca class=\"popup\" href=\"#hello\"\u003ePopup\u003c/a\u003e\n\nThe link above would open the contents of the \"hello\" div in a popup window\nwhen clicked.\n\n\nManually Creating Popup Windows\n------------------------------------------------------------------------------\n\nThe trigger behavior is useful for the simple case where you want to associate\na link with a popup window, but sometimes you need more control.\n\nIn these cases you can manually create a popup window in code, like this:\n\n    var popup = new Popup.Window('element_id', {draggable: true});\n    popup.show();\n\nThe Popup.Window constructor accepts two parameters. The first is the ID of the\nelement that contains the contents of the popup window. The second is the\noptions hash. For regular popup windows, there is only one option:\n_draggable_. By default, this option is false, but when set to true it allows\na window to be repositioned by dragging the titlebar. The titlebar element\nmust have a class of \"popup_title\" (this can be configured with the\nPopup.TitlebarClass variable).\n\nIf you need to create an Ajax window, you can use the following code:\n\n    var popup = new Popup.AjaxWindow(url, {reload: false});\n    popup.show();\n\nThe Popup.AjaxWindow constructor accepts two parameters. The first is the URL\nof the contents of the popup window, and the second is an options hash. The\noptions hash can contain the _draggable_ and _reload_ options. The\nreload option is true by default and controls whether or not the contents of\nthe window will be reloaded each time the window is shown.\n\nTo hide a window, use the hide function:\n\n    popup.hide();\n\n\nPopup Dialogs\n------------------------------------------------------------------------------\n\nPopupJS also includes replacements for the standard _alert_ and _confirm_\njavascript functions so that you can easily display message boxes and\nconfirmation dialogs.\n\nHere's a couple of examples:\n\n    // OK alert dialog\n    Popup.alert('Hello World!');\n    \n    // Confirmation dialog with OK and Cancel buttons\n    Popup.confirm('Are you sure?', {\n      okay: function() { ... },\n      cancel: function() { ... }\n    });\n\nIf you want more control over the buttons used in the dialog, you can use the\n_Popup.dialog()_ function:\n\n    // Completely custom dialog with Yes, No, and Maybe\n    Popup.dialog({\n      title: 'Friend Request',\n      message: 'Add Dwight Schrute as a friend?',\n      buttons: ['Yes', 'No', 'Maybe'],\n      buttonClick: function(button) { ... }\n    });\n\nThe _Popup.alert()_ and _Popup.confirm()_ functions are implemented in terms\nof the _Popup.dialog()_ function and both accept the same options as the\n_Popup.dialog()_ function. To use a custom title and buttons on an alert\ndialog you could do this:\n\n    Popup.alert('Jim was here.', {title: 'The Office', buttons: ['Yup'] });\n\n\nSupport and Contributions\n------------------------------------------------------------------------------\n\nAll of the development of PopupJS takes place on GitHub:\n\n* \u003chttp://github.com/jlong/popupjs\u003e\n\nIf you run into a problem, please file a ticket on the [issue tracker][6]. Or\neven better, [submit a pull request][7]. Contributions are welcome and\nencouraged.\n\n\nLicense\n------------------------------------------------------------------------------\n\nPopupJS is distributed under an MIT-style license. Use it for good or for\nawesome.\n\n\n[1]: http://prototypejs.org\n[2]: http://script.aculo.us\n[3]: http://github.com/danwrong/low-pro\n[4]: http://en.wikipedia.org/wiki/Unobtrusive_JavaScript\n[5]: http://www.danwebb.net/2006/9/3/low-pro-unobtrusive-scripting-for-prototype\n[6]: https://github.com/jlong/popupjs/issues\n[7]: http://help.github.com/pull-requests/","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlong%2Fpopupjs","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjlong%2Fpopupjs","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjlong%2Fpopupjs/lists"}