PHPackages robsonsuzin/smodal - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. robsonsuzin/smodal ActiveLibrary[Utility & Helpers](/categories/utility) robsonsuzin/smodal ================== An easy way to work with modals 1.0.15(6y ago)54854MITHTMLPHP ^7.1 Since Sep 4Pushed 2y ago2 watchersCompare [ Source](https://github.com/robsonsuzin/Smodal)[ Packagist](https://packagist.org/packages/robsonsuzin/smodal)[ Docs](https://www.suzincode.com.br)[ RSS](/packages/robsonsuzin-smodal/feed)WikiDiscussions master Synced 2d ago READMEChangelog (10)DependenciesVersions (19)Used By (0) Smodal @SuzinCodex ================== [](#smodal-suzincodex) [![Maintainer](https://camo.githubusercontent.com/ca114c488343b37727cb45931a23ab02e9e2e6ca5b64b85c432efafd0cb6e72a/687474703a2f2f696d672e736869656c64732e696f2f62616467652f6d61696e7461696e65722d40726f62736f6e73757a696e2d626c75652e7376673f7374796c653d666c61742d737175617265)](https://twitter.com/robsonsuzin)[![Source Code](https://camo.githubusercontent.com/a30ffbd61cc9bd98353fad1d2d314c00e46676cd8cc8651eadd5032c116b1772/687474703a2f2f696d672e736869656c64732e696f2f62616467652f736f757263652d726f62736f6e73757a696e2f736d6f64616c2d626c75652e7376673f7374796c653d666c61742d737175617265)](https://github.com/robsonsuzin/smodal)[![PHP from Packagist](https://camo.githubusercontent.com/05d3b6256a86f1691b0427fb9db3cf7b19d22aa79539c49cb4351ef40962c59a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f7068702d762f726f62736f6e73757a696e2f736d6f64616c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/robsonsuzin/smodal)[![Latest Version](https://camo.githubusercontent.com/c474955e255daf102f76fee7e049eef44bcda2451644a348f60ad0eb86f1b835/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f72656c656173652f726f62736f6e73757a696e2f536d6f64616c2e7376673f7374796c653d666c61742d737175617265)](https://github.com/robsonsuzin/smodal/releases)[![Software License](https://camo.githubusercontent.com/55c0218c8f8009f06ad4ddae837ddd05301481fcf0dff8e0ed9dadda8780713e/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d627269676874677265656e2e7376673f7374796c653d666c61742d737175617265)](LICENSE)[![Build](https://camo.githubusercontent.com/7543186a23fa984f5e46ca22b323d49ca679701c4027f3979d9bd1435d8f3fd8/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f6275696c642f672f726f62736f6e73757a696e2f536d6f64616c2e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/robsonsuzin/smodal)[![Quality Score](https://camo.githubusercontent.com/efbf5612edec1ac6b24c22f6f5446fc679dcd981bcb3b44febe2a495bec0e04e/68747470733a2f2f696d672e736869656c64732e696f2f7363727574696e697a65722f672f726f62736f6e73757a696e2f536d6f64616c2e7376673f7374796c653d666c61742d737175617265)](https://scrutinizer-ci.com/g/robsonsuzin/smodal)[![Total Downloads](https://camo.githubusercontent.com/5c0852c24d124ab1cfbfd0e483fa4f10e76c4f70f007beca2bd9537c06c3c878/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f726f62736f6e73757a696e2f536d6f64616c2e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/robsonsuzin/smodal) ###### Smodal is a component that simplifies the creation of modals with a simple engine. Smodal creates modals with zero complexity. [](#smodal-is-a-component-that-simplifies-the-creation-of-modals-with-a-simple-engine-smodal-creates-modals-with-zero-complexity) Smodal é um componente que simplifica a criação de modais com um motor simples. A Smodal cria modais muito fácil! About Smodal ------------ [](#about-smodal) ###### Smodal is a tool in PHP and Javascript for creating modals. Maintained by Robson Suzin. With it you turn a more complex task into a simple line of code to generate the renders. [](#smodal-is-a-tool-in-php-and-javascript-for-creating-modals-maintained-by-robson-suzin-with-it-you-turn-a-more-complex-task-into-a-simple-line-of-code-to-generate-the-renders) Smodal é uma ferramenta em PHP e Javascript para criar modais. Mantido por Robson Suzin. Com ela você transforma uma tarefa mais complexa em uma simples linha de código para gerar os renders. ### Highlights [](#highlights) - Simple Modal Creator (Simples criador de modais) - Opening Modes Already Inserted in Document (Abertura de Modais já inseridas no documento) - Opening modal via callback (Abertura de modais via callback) - Creating Modes to Confirm an Action (Criação de Modais para confirmação de uma ação) - Creation of Modals for information (Criação de Modais para informação) - Various ways to customize (Várias formas de personalizar) - Composer ready and PSR-2 compliant (Pronto para o composer e compatível com PSR-2) Installation ------------ [](#installation) Smodal is available via Composer: ``` "robsonsuzin/smodal": "^1.0" ``` or run ``` composer require robsonsuzin/smodal ``` Documentation ------------- [](#documentation) Para iniciar a utilização, precisamos incluir o jquery no documento : ``` ``` Adicionar o arquivo ***smodal.js***: ``` ``` Adicionar o arquivo ***smodal.css***: ``` ``` Ou vc pode copiar a estilização que está na pasta ***example***, para seu projeto e fazer as alterações. Funções da Smodal: ------------------ [](#funções-da-smodal) Você pode passar no construtor um nome para a classe da modal ou vai atribuir a classe padrão ``` $modal = (new \Source\Support\Smodal()) ``` Função para setar a class da modal ``` ->setSmodalname("modal_name_class") ``` Função para setar o html da modal - ***info*** ou ***delete*** ``` ->setSmodaltype("delete") ``` Função para adicionar um conteudo HTML dentro da modal ``` ->setSmodalhtml("Modal") ``` Função para setar o tamanho da modal, padrão 500 ``` ->setSmodalwidth(700) ``` Função para adicionar um botão de Imprimir no canto direito ``` ->setSmodalprint('true') ``` Função para setar o tipo de efeito para abrir a modal, efeito do jqueryUi ``` ->setSmodaleffect('bounce') ``` Função para setar qual elemento vai receber os data() do elemento que recebe evento ``` ->setSmodaldata('js-confirm') ``` Função para adicionar Atributo Data ao $element ``` ->setSadddata($element, $data, $value) ``` Função para remover Atributo Data do $element ``` ->setSremovedata($element, $data) ``` Função para adicionar Atributos ao $element ``` ->setSaddattr($element, $attr, $value) ``` Função para remover Atributos do $element ``` ->setSremoveattr($element, $attr) ``` Função para adicionar Html ao $element ``` ->setSaddhtml($element, $value) ``` Função para adicionar Classe ao $element ``` ->setSaddclass($element, $class) ``` Função para remove Classe do $element ``` ->setSremoveclass($element, $class) ``` Função para remove o $element ``` ->setSremoveelement($element) ``` Função para adiciona css ao $elemento ``` ->setSaddcss($element, $css, $value) ``` Exemplos de utilização modal dialog para exclusão ------------------------------------------------- [](#exemplos-de-utilização-modal-dialog-para-exclusão) #### Abrindo uma modal pela ação de um botão utilizando a classe Smodal [](#abrindo-uma-modal-pela-ação-de-um-botão-utilizando-a-classe-smodal) ``` Botão que vai receber o click data-action="delete" data-id="10">Deletar Script que monitora o botão: $(document).on('click', "[smodalname]", function (e) { e.preventDefault(); $(this).smodal([], template); }); ``` #### Abrindo modal pelo callback do ajax [](#abrindo-modal-pelo-callback-do-ajax) ``` Objeto para ser enviado ao callback $smodal = (new Smodal('suzin_smodal_departament_address')) ->setSmodalwidth(700) ->setSmodaleffect("bounce") ->setSmodalhtml( $this->view->render("widgets/registration/views/modal_vehicle", [ "title" => $title, "vehicle" => $vehicleEdit, "departaments" => $departaments->order('name')->fetch(true) ])); $json["smodal"] = $smodal->renderObject(); Monitoramento do callback if (response.smodal) { $(this).smodal(response.smodal, template); } ``` #### Exemplo de Monitoramento pelo \[data-post\] envio por ajax [](#exemplo-de-monitoramento-pelo-data-post-envio-por-ajax) ``` // Envio Ajax pelo click no data-post $(document).on("click", "[data-post]", function (e) { e.preventDefault(); var clicked = $(this); var data = clicked.data(); var load = $(".ajax_load"); $.ajax({ url: data.post, type: "POST", data: data, dataType: "json", beforeSend: function () { load.fadeIn(200).css("display", "flex"); }, success: function (response) { if (response.smodal) { $('.suzin_smodal').fadeOut(); $(document).smodal(response.smodal, template); } }, error: function () { ajaxMessage(ajaxResponseRequestError, 5); load.fadeOut(); } }); }); ``` #### Exemplo de Utilização de Template [](#exemplo-de-utilização-de-template) No seu arquivo de scripts js aonde você vai iniciar ou chamar o smodal() ------------------------------------------------------------------------ [](#no-seu-arquivo-de-scripts-js-aonde-você-vai-iniciar-ou-chamar-o-smodal) ``` /* * Template Smodal * Você pode criar seus templates e chamar no seu objeto Smodal :) */ template = {}; template.info = ` OK Editar`; template.delete = ` Cancelar Apagar`; template.teste = `Titulo da Modal Um paragráfo da Modal Cancelar Apagar`; /* * APP MODAL * Monitoramento do smodalname */ $(document).on('click', "[smodalname]", function (e) { e.preventDefault(); $(this).smodal([], template); }); //Caso você for utilizar no callback do ajax if (response.smodal) { $(document).smodal(response.smodal, template); } ``` Contributing ------------ [](#contributing) Please see [CONTRIBUTING](https://github.com/robsonsuzin/smodal/blob/master/CONTRIBUTING.md) for details. Support ------- [](#support) ###### Security: If you discover any security related issues, please email instead of using the issue tracker. [](#security-if-you-discover-any-security-related-issues-please-email-robsonsuzinhotmailcom-instead-of-using-the-issue-tracker) Se você descobrir algum problema relacionado à segurança, envie um e-mail para em vez de usar o rastreador de problemas. Thank you Credits ------- [](#credits) - [Robson Suzin](https://github.com/robsonsuzin) (Developer) - [All Contributors](https://github.com/robsonsuzin/smodal/contributors) (This Rock) License ------- [](#license) The MIT License (MIT). Please see [License File](https://github.com/robsonsuzin/smodal/blob/master/LICENSE) for more information. ### Health Score 31 — LowBetter than 66% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity20 Limited adoption so far Community12 Small or concentrated contributor base Maturity62 Established project with proven stability Bus Factor1 Top contributor holds 92.7% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~16 days Recently: every ~27 days Total 16 Last Release 2246d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/fd38299de5b0f16385d6474ff1c515b4e6e2ac96f4409268de17247f7e1bc845?d=identicon)[robsonsuzin](/maintainers/robsonsuzin) --- Top Contributors [![robsonsuzin](https://avatars.githubusercontent.com/u/48738982?v=4)](https://github.com/robsonsuzin "robsonsuzin (38 commits)")[![wilderamorim](https://avatars.githubusercontent.com/u/22435252?v=4)](https://github.com/wilderamorim "wilderamorim (3 commits)") --- Tags modalSuzinCodeSmodalSmodalsmodaisJanelaJanelas ### Embed Badge ![Health badge](/badges/robsonsuzin-smodal/health.svg) ``` [![Health](https://phpackages.com/badges/robsonsuzin-smodal/health.svg)](https://phpackages.com/packages/robsonsuzin-smodal) ``` ### Alternatives [wire-elements/modal Laravel Livewire modal component 1.2k4.0M32](/packages/wire-elements-modal)[kartik-v/bootstrap-popover-x Bootstrap Popover Extended - Popover with modal behavior, styling enhancements and more. 1143.6M3](/packages/kartik-v-bootstrap-popover-x)[pboivin/filament-peek Full-screen page preview modal for Filament 252365.8k17](/packages/pboivin-filament-peek)[kartik-v/yii2-dialog An asset bundle for bootstrap3-dialog for Yii 2.0 framework. 496.4M19](/packages/kartik-v-yii2-dialog)[kartik-v/bootstrap-tabs-x Extended Bootstrap Tabs with ability to align tabs in multiple ways, add borders, rotated titles, and more. 1021.4M1](/packages/kartik-v-bootstrap-tabs-x)[kartik-v/yii2-tabs-x A supercharged Bootstrap tabs widget with ability to align tabs in multiple ways, add borders, rotated titles, and more. 301.4M21](/packages/kartik-v-yii2-tabs-x) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)