{"url":"https://api.github.com/gists/584742","forks_url":"https://api.github.com/gists/584742/forks","commits_url":"https://api.github.com/gists/584742/commits","id":"584742","node_id":"MDQ6R2lzdDU4NDc0Mg==","git_pull_url":"https://gist.github.com/584742.git","git_push_url":"https://gist.github.com/584742.git","html_url":"https://gist.github.com/584742","files":{".block":{"filename":".block","type":"text/plain","language":null,"raw_url":"https://gist.githubusercontent.com/mbostock/584742/raw/703d310b399098a243a76a50bc209167e924cfd2/.block","size":17,"truncated":false,"content":"license: gpl-3.0\n"},"README.md":{"filename":"README.md","type":"text/plain","language":"Markdown","raw_url":"https://gist.githubusercontent.com/mbostock/584742/raw/0dc5993eecc6be5db61d1d7a4953837796a04823/README.md","size":1212,"truncated":false,"content":"A frequent challenge in user interface design is how to avoid accidental destructive actions. *Destructive* actions are non-undoable; for example, you might want to allow the user to delete a file, and once deleted the file cannot be restored. JavaScript provides some simple facilities for this, such as the `confirm` dialog box, but modal interfaces are annoying and disruptive: they force the user to confirm or cancel the prompt before doing anything else, even accessing another browser tab or window.\n\nTaking a queue from the elegant solution in iOS, here is a modal button. The button serves as its own confirmation dialog by asking “Are you sure?” on the first click. If the user clicks again, then the action is performed. Otherwise, the user can simply mouseout to cancel. CSS3 transitions and animations (in WebKit) are used to draw visual attention to confirmation. Note that unlike popup dialog boxes, the user conveniently does not need to move the mouse to confirm the action.\n\nOne subtlety in the implementation: users may inadvertently double-click on the button. This should not be interpreted as confirmation, so the click handler forces a 500ms delay before allowing confirmation."},"button.css":{"filename":"button.css","type":"text/css","language":"CSS","raw_url":"https://gist.githubusercontent.com/mbostock/584742/raw/ecc15dc2df715de76310107db3ff510eab9dbfc4/button.css","size":861,"truncated":false,"content":"button {\n background: #222 url(http://bost.ocks.org/button-overlay.png) repeat-x;\n color: #fff;\n text-rendering: optimizeLegibility;\n text-shadow: 0 -1px 1px #222;\n padding: 6px 10px 6px 10px;\n border: 0;\n border-bottom: 1px solid #222;\n -moz-border-radius: 5px;\n -moz-box-shadow: 0 1px 3px #999;\n -moz-transition: background-color 250ms linear;\n -webkit-border-radius: 5px;\n -webkit-box-shadow: 0 1px 3px #999;\n -webkit-transition: background-color 250ms linear;\n}\n\nbutton:hover {\n background-color: #555;\n}\n\nbutton.confirm {\n background-color: brown;\n -webkit-animation-name: pulse;\n -webkit-animation-iteration-count: infinite;\n -webkit-animation-delay: 250ms;\n -webkit-animation-duration: 1000ms;\n -webkit-animation-direction: alternate;\n}\n\n@-webkit-keyframes pulse {\n 0% { background-color: brown; }\n 100% { background-color: red; }\n}"},"index.html":{"filename":"index.html","type":"text/html","language":"HTML","raw_url":"https://gist.githubusercontent.com/mbostock/584742/raw/15a7138c6cc028adfb953106c1795d3f890f1019/index.html","size":1316,"truncated":false,"content":"\n\n \n CSS3 Modal Button\n \n \n \n
\n \n
\n \n \n"},"thumbnail.png":{"filename":"thumbnail.png","type":"image/png","language":null,"raw_url":"https://gist.githubusercontent.com/mbostock/584742/raw/34cf42aec508e165c92163cb1a7c4897a61ae99a/thumbnail.png","size":1269,"truncated":false,"content":"�PNG\r\n\u001A\n\u0000\u0000\u0000\rIHDR\u0000\u0000\u0000�\u0000\u0000\u0000x\b\u0006\u0000\u0000\u0000�\u0006��\u0000\u0000\u0000\u0019tEXtSoftware\u0000Adobe ImageReadyq�e<\u0000\u0000\u0004�IDATx����O\u001Bu\u0000�������2�B�抰��\u0001��\u0007N�\u0012�\u0011\u001F��7\u0018�/��oP\u0013�!�ɈQ\u0013}�%K��'�Q6\u0018��u�G��\u000E�����2��2c\"���J�#�z\\���}�W+\b�\u0005I=fq\u0005�Q��e�1?�����\u0000Z�\u001B�\u001C\u0000��0\u0001�\u0004@�\u0000a\u0002 L�0\u0001\u0010&@�\u0000\b\u0013\u0000a\u0002�\t�0\u0001�\u0004@�\u0000a\u0002 L\u0000�\t\u0010&\u0000�\u0004\b\u0013\u0000a\u0002�\t�0\u0001\u0010&@�\u0000\b\u0013 L\u0000�\t\u0010&\u0000�\u0004@�\u0000a\u0002 L�0\u0001\u0010&@�\u0000\b\u0013\u0000a\u0002�\t�0\u0001�\u0004@�\u0000a\u0002 L\u0000�\t\u0010&\u0000�\u0004\b\u0013\u0000a\u0002�\t�0\u0001\u0010&@�\u0000�\u0005�Spt��fgg\u0015\u0004�,���\u001Cwx��������\"\u0012��355���i���\u001F���h�718qsy��ۅi��'+fˎY���\u001A����ľ�G�۶��c�a~o��\u0012�D�}3��jbbB333J��\\H�<^������\u0016-M�4�tfO�DG\\+�;��u�l\u0013�Y,S��zQ�a�պ�����޸�J͗mڬ�ja�jO����n�\\X4��3que{ԗ;���u-.�Vϓ��v����\u001A����q�6+���%L�<~��x4�=l\u0018�0!�?;��\u00062���o��;視���ŢjVZccC�\u0015���j�S�>���LJ\u001F}���'���/����❂2�.^zE�k������VI�#�*,�T�\u0016S[�S]iG\u001F~��R\u000F\t���A��/����0���\u0005���\u0015�\ns��\u001FTI?�\u0017G�ڨ��z�����R�\u00172Z]���\u0017_R`n�}�;��WW��%�;;�\rMȭT�ٕQy3��b^c/��щq���W}��U3\u0014�\u0019 a�P1\u0013Ii}M�޸��^O����)n��3ѝ����U��48د��\u0011�6;��\u001B�e��d��u�\\Rń��\u001FP���rЦ�o�\u001B\u001Dr��Z^^U�Zн���o�k�^�\f�\t�0\u001Fc��\u000B�K��h~��\u001D\u0015����{�DsJS�\t�7+۬=3LmD\u000F}\u0002�ԞLhoo_�c?�����\n�ע\u0007:�\u0010�^�G\u000F��M������K\\��\u001C�\u0017�?�ls�1�\u000B\u001F\u0000�0����I���)�L>t��OI\u000FJ{`�k��r(a�e5{�\u001F��#�a�����N�\\�`��d�X�բc��#�͘\u000B�i�'9\u0015���\u0003���\u000F�j�U�r9�R).��(\u0011&Ђa2�\u0007Z\u0010a\u0002�\t�0\u0001�\u0004@�\u0000a\u0002 L�0\u0001\u0010&\u0000�\u0004\b\u0013\u0000a\u0002�\t�0\u0001�\u0004@�\u0000\b\u0013 L\u0000�\t\u0010&\u0000�\u0004\b\u0013\u0000a\u0002 L�0\u0001\u0010&@�\u0000\b\u0013 L\u0000�\t�0\u0001�\u0004@�\u0000a\u0002 L�0\u0001\u0010&\u0000�\u0004\b\u0013\u0000a\u0002�\t�0\u0001�\u0004@�\u0000\b\u0013 L\u0000�\t\u0010&\u0000�\u0004\b\u0013\u0000a\u0002 L��9��m�u�,.�\u0003x��\u0016�~\u0017`\u0000_Wa��\t�[\u0000\u0000\u0000\u0000IEND�B`�"}},"public":true,"created_at":"2010-09-17T19:00:49Z","updated_at":"2016-02-08T22:57:27Z","description":"CSS3 Modal Button","comments":1,"user":null,"comments_url":"https://api.github.com/gists/584742/comments","owner":{"login":"mbostock","id":230541,"node_id":"MDQ6VXNlcjIzMDU0MQ==","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","gravatar_id":"","url":"https://api.github.com/users/mbostock","html_url":"https://github.com/mbostock","followers_url":"https://api.github.com/users/mbostock/followers","following_url":"https://api.github.com/users/mbostock/following{/other_user}","gists_url":"https://api.github.com/users/mbostock/gists{/gist_id}","starred_url":"https://api.github.com/users/mbostock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbostock/subscriptions","organizations_url":"https://api.github.com/users/mbostock/orgs","repos_url":"https://api.github.com/users/mbostock/repos","events_url":"https://api.github.com/users/mbostock/events{/privacy}","received_events_url":"https://api.github.com/users/mbostock/received_events","type":"User","site_admin":false},"forks":[],"history":[{"user":{"login":"mbostock","id":230541,"node_id":"MDQ6VXNlcjIzMDU0MQ==","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","gravatar_id":"","url":"https://api.github.com/users/mbostock","html_url":"https://github.com/mbostock","followers_url":"https://api.github.com/users/mbostock/followers","following_url":"https://api.github.com/users/mbostock/following{/other_user}","gists_url":"https://api.github.com/users/mbostock/gists{/gist_id}","starred_url":"https://api.github.com/users/mbostock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbostock/subscriptions","organizations_url":"https://api.github.com/users/mbostock/orgs","repos_url":"https://api.github.com/users/mbostock/repos","events_url":"https://api.github.com/users/mbostock/events{/privacy}","received_events_url":"https://api.github.com/users/mbostock/received_events","type":"User","site_admin":false},"version":"1a58c719582aa34be02fc3bcf6e8cbdb44b48e4a","committed_at":"2016-02-08T22:57:25Z","change_status":{"total":1,"additions":1,"deletions":0},"url":"https://api.github.com/gists/584742/1a58c719582aa34be02fc3bcf6e8cbdb44b48e4a"},{"user":{"login":"mbostock","id":230541,"node_id":"MDQ6VXNlcjIzMDU0MQ==","avatar_url":"https://avatars2.githubusercontent.com/u/230541?v=4","gravatar_id":"","url":"https://api.github.com/users/mbostock","html_url":"https://github.com/mbostock","followers_url":"https://api.github.com/users/mbostock/followers","following_url":"https://api.github.com/users/mbostock/following{/other_user}","gists_url":"https://api.github.com/users/mbostock/gists{/gist_id}","starred_url":"https://api.github.com/users/mbostock/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/mbostock/subscriptions","organizations_url":"https://api.github.com/users/mbostock/orgs","repos_url":"https://api.github.com/users/mbostock/repos","events_url":"https://api.github.com/users/mbostock/events{/privacy}","received_events_url":"https://api.github.com/users/mbostock/received_events","type":"User","site_admin":false},"version":"3ceab1d4b580ce3189540dbd7a39faa97cdbe41d","committed_at":"2012-10-12T03:39:42Z","change_status":{"total":0,"additions":0,"deletions":0},"url":"https://api.github.com/gists/584742/3ceab1d4b580ce3189540dbd7a39faa97cdbe41d"},{"user":null,"version":"32affa22f9ea6d6bf4289c9f94cc4388cf3c93af","committed_at":"2010-09-18T16:46:02Z","change_status":{"total":3,"additions":1,"deletions":2},"url":"https://api.github.com/gists/584742/32affa22f9ea6d6bf4289c9f94cc4388cf3c93af"},{"user":null,"version":"ef3836191d00b2e2824b5d1703149783c1b35cae","committed_at":"2010-09-18T16:44:55Z","change_status":{"total":1,"additions":1,"deletions":0},"url":"https://api.github.com/gists/584742/ef3836191d00b2e2824b5d1703149783c1b35cae"},{"user":null,"version":"ac2f5ac9dff2c0eb4e09d9f6574cd01f94363516","committed_at":"2010-09-17T19:48:34Z","change_status":{"total":2,"additions":1,"deletions":1},"url":"https://api.github.com/gists/584742/ac2f5ac9dff2c0eb4e09d9f6574cd01f94363516"},{"user":null,"version":"6cafaf21313e6845f16a391ee4cadf023abc790a","committed_at":"2010-09-17T19:11:19Z","change_status":{"total":2,"additions":1,"deletions":1},"url":"https://api.github.com/gists/584742/6cafaf21313e6845f16a391ee4cadf023abc790a"},{"user":null,"version":"aefe59690a24cbd7928a0b196ab70238169fa4c6","committed_at":"2010-09-17T19:02:34Z","change_status":{"total":5,"additions":0,"deletions":5},"url":"https://api.github.com/gists/584742/aefe59690a24cbd7928a0b196ab70238169fa4c6"},{"user":null,"version":"1fd5d728f6e8648a14bb300aa847d683804d35aa","committed_at":"2010-09-17T19:00:53Z","change_status":{"total":113,"additions":113,"deletions":0},"url":"https://api.github.com/gists/584742/1fd5d728f6e8648a14bb300aa847d683804d35aa"}],"truncated":false}