[email protected]

modal with vue

By hebibulla

#modal #card #responsive

Share

/r/n <script>\r\n \r\n new Vue({\r\n el:'#app',\r\n data(){\r\n return{\r\n show_modal: true,\r\n }\r\n },\r\n methods:{\r\n showModal(){\r\n if(this.show_modal){\r\n \/\/stop screen scrolling\r\n document.getElementsByTagName(\"html\")[0].classList.remove('overflow-y-hidden'); \r\n this.show_modal = false;\r\n }else{\r\n document.getElementsByTagName(\"html\")[0].classList.add('overflow-y-hidden');\r\n this.show_modal = true;\r\n }\r\n }\r\n }\r\n })\r\n \r\n <\/script>\r\n\r\n<\/html>","author_type":"App\\User","author_id":313,"collection_id":null,"fork_id":null,"votes":6,"score":"4.0","visits":9514,"popularity":596,"slug":"modal-with-vue","approved":1,"created_at":"2020-01-19T03:38:02.000000Z","updated_at":"2025-04-18T13:47:09.000000Z","downloads":149,"code_views":3253,"center":false,"notified":1,"premium":0,"tailwind_config":null,"type":"component","css":"https:\/\/cdn.tailwindcss.com","should_tweet":0,"media":[{"id":8661,"model_type":"App\\Component","model_id":253,"collection_name":"preview","name":"temp64054","file_name":"temp64054.png","mime_type":"image\/png","disk":"public","size":42923,"manipulations":[],"custom_properties":[],"responsive_images":{"media_library_original":{"urls":["temp64054___media_library_original_1280_957.png","temp64054___media_library_original_1070_800.png","temp64054___media_library_original_896_670.png","temp64054___media_library_original_749_560.png","temp64054___media_library_original_627_469.png"],"base64svg":"data:image\/svg+xml;base64,PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHhtbDpzcGFjZT0icHJlc2VydmUiIHg9IjAiCiB5PSIwIiB2aWV3Qm94PSIwIDAgMTI4MCA5NTciPgoJPGltYWdlIHdpZHRoPSIxMjgwIiBoZWlnaHQ9Ijk1NyIgeGxpbms6aHJlZj0iZGF0YTppbWFnZS9qcGVnO2Jhc2U2NCwvOWovNEFBUVNrWkpSZ0FCQVFFQVlBQmdBQUQvL2dBN1ExSkZRVlJQVWpvZ1oyUXRhbkJsWnlCMk1TNHdJQ2gxYzJsdVp5QkpTa2NnU2xCRlJ5QjJPREFwTENCeGRXRnNhWFI1SUQwZ09UQUsvOXNBUXdBREFnSURBZ0lEQXdNREJBTURCQVVJQlFVRUJBVUtCd2NHQ0F3S0RBd0xDZ3NMRFE0U0VBME9FUTRMQ3hBV0VCRVRGQlVWRlF3UEZ4Z1dGQmdTRkJVVS85c0FRd0VEQkFRRkJBVUpCUVVKRkEwTERSUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVRkJRVUZCUVVGQlFVLzhBQUVRZ0FHQUFnQXdFUkFBSVJBUU1SQWYvRUFCOEFBQUVGQVFFQkFRRUJBQUFBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUUFBSUJBd01DQkFNRkJRUUVBQUFCZlFFQ0F3QUVFUVVTSVRGQkJoTlJZUWNpY1JReWdaR2hDQ05Dc2NFVlV0SHdKRE5pY29JSkNoWVhHQmthSlNZbktDa3FORFUyTnpnNU9rTkVSVVpIU0VsS1UxUlZWbGRZV1ZwalpHVm1aMmhwYW5OMGRYWjNlSGw2ZzRTRmhvZUlpWXFTazVTVmxwZVltWnFpbzZTbHBxZW9xYXF5czdTMXRyZTR1YnJDdzhURnhzZkl5Y3JTMDlUVjF0ZlkyZHJoNHVQazVlYm42T25xOGZMejlQWDI5L2o1K3YvRUFCOEJBQU1CQVFFQkFRRUJBUUVBQUFBQUFBQUJBZ01FQlFZSENBa0tDLy9FQUxVUkFBSUJBZ1FFQXdRSEJRUUVBQUVDZHdBQkFnTVJCQVVoTVFZU1FWRUhZWEVUSWpLQkNCUkNrYUd4d1Frak0xTHdGV0p5MFFvV0pEVGhKZkVYR0JrYUppY29LU28xTmpjNE9UcERSRVZHUjBoSlNsTlVWVlpYV0ZsYVkyUmxabWRvYVdwemRIVjJkM2g1ZW9LRGhJV0doNGlKaXBLVGxKV1dsNWlabXFLanBLV21wNmlwcXJLenRMVzJ0N2k1dXNMRHhNWEd4OGpKeXRMVDFOWFcxOWpaMnVMajVPWG01K2pwNnZMejlQWDI5L2o1K3YvYUFBd0RBUUFDRVFNUkFEOEEvU1c4MTZ5c0cyejNDUm4wWTEybkVWZitFdzBuL245aC93QytoUUFmOEpqcFAvUDdELzMwS0FMTm5yOWxxRDdiZTRTVStpbk5BSEYrTnZoa2ZGbDBKZnRVa09PeW5GUkp0YkdzVWpsZitHZHc1eWRUbUgvQWpVYzBpN0lYL2huVmYrZ3BOLzMwYU9hUVdSMG5najRacjRQdldjWGNrNTlHT2FxTW0zcVl0cTlqMGZZYTBzVGNOaG9zRncyR2l3N3NiNUl6bkhOQWovL1oiPgoJPC9pbWFnZT4KPC9zdmc+"}},"order_column":8474,"created_at":"2023-02-03T13:10:12.000000Z","updated_at":"2023-02-03T13:10:14.000000Z","conversions_disk":"public","uuid":"f9399012-ae6a-4c97-aa0d-df53cf1cb28c","generated_conversions":{"thumb":true,"ogimage":true},"original_url":"https:\/\/tailwindcomponents.com\/storage\/8661\/temp64054.png","preview_url":""}],"author":{"id":313,"name":"hebibulla","slug":"hebibulla","bio":null,"avatar":"https:\/\/avatars2.githubusercontent.com\/u\/33139713?v=4","header":null,"created_at":"2020-01-16T07:52:04.000000Z","updated_at":"2020-01-16T07:52:04.000000Z"},"tags":[{"id":4,"name":{"en":"Cards"},"description":"Check out our examples of beautifully designed cards that will help you display your content easily. Use our snippets to preview the code and spend less time re-inventing the wheel.","meta_description":"Check out our examples of beautifully designed cards that will help you display your content easily.","slug":{"en":"cards"},"type":null,"order_column":3,"created_at":"2019-07-04T08:20:17.000000Z","updated_at":"2022-08-01T16:06:24.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":253,"tag_id":4}},{"id":10,"name":{"en":"Modals"},"description":"Choose from our extensive collection of responsive modals to create dialogs, popovers, light boxes, and so on. Show interactive information to your website users using these Tailwind snippets.","meta_description":"Choose from our extensive collection of responsive modals to create dialogs, popovers, light boxes, and so on.","slug":{"en":"modals"},"type":null,"order_column":8,"created_at":"2020-09-29T11:20:03.000000Z","updated_at":"2022-08-01T16:22:07.000000Z","pivot":{"taggable_type":"App\\Component","taggable_id":253,"tag_id":10}}],"fork":null,"favorites":[{"id":6210,"name":"i_danu_s","slug":"i-danu-s","bio":null,"avatar":"https:\/\/pbs.twimg.com\/profile_images\/1470038743687970816\/Awy8fATE_normal.jpg","header":null,"created_at":"2021-12-18T11:23:56.000000Z","updated_at":"2021-12-18T11:23:56.000000Z","pivot":{"component_id":253,"user_id":6210}},{"id":6419,"name":"cryptmx","slug":"cryptmx","bio":null,"avatar":"https:\/\/avatars.githubusercontent.com\/u\/85723980?v=4","header":null,"created_at":"2022-01-07T01:56:03.000000Z","updated_at":"2022-01-07T01:56:03.000000Z","pivot":{"component_id":253,"user_id":6419}}]}" :edit="false"> Full screen Preview

hebibulla

3 components Profile On

modal with vue

Community Rate

Related components