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!
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.
- 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)
Smodal is available via Composer:
"robsonsuzin/smodal": "^1.0"or run
composer require robsonsuzin/smodalPara iniciar a utilização, precisamos incluir o jquery no documento :
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>Adicionar o arquivo smodal.js:
<script src="/vendor/robsonsuzin/smodal/src/js/smodal.js"></script>Adicionar o arquivo smodal.css:
<link rel="stylesheet" href="/vendor/robsonsuzin/smodal/src/css/style.css"/>
<link rel="stylesheet" href="/vendor/robsonsuzin/smodal/src/css/icons/styles.css"/>Ou vc pode copiar a estilização que está na pasta example, para seu projeto e fazer as alterações.
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("<p>Modal</p>")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)Botão que vai receber o click
<?php
$modal_delete = (new Smodal())
->setSmodaltype("delete");
->setSadddata("js-confirm", "post", url("/" . CONF_VIEW_APP . "/registration/departament"));
->setSaddhtml(
"js-title",
"<b>Atenção:</b> Tem certeza que deseja excluir esse departamento! Essa Ação não pode ser desfeita!"
);
?>
<a class="icon-trash-o btn btn-small btn-red" href="#" title="Deletar Departamento?"
<?= $modal_delete->renderString(); ?>
data-action="delete"
data-id="10">Deletar</a>
Script que monitora o botão:
$(document).on('click', "[smodalname]", function (e) {
e.preventDefault();
$(this).smodal([], template);
}); Objeto para ser enviado ao callback
$smodal = (new Smodal('app_modal_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);
} // 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) {
$('.app_modal').fadeOut();
$(document).smodal(response.smodal, template);
}
},
error: function () {
ajaxMessage(ajaxResponseRequestError, 5);
load.fadeOut();
}
});
}); /*
* Template Smodal
* Você pode criar seus templates e chamar no seu objeto Smodal :)
*/
template = {};
template.info = `<div class="js-icon icon-notext color-blue icon-info al-center"></div>
<h3 class="js-title title"></h3>
<div class="ds-flex text-center" >
<a class="js-cancel btn btn-normal btn-green icon-check radius transition" smodalclose="true" href="#">OK</a>
<a class="js-confirm btn btn-normal btn-blue icon-pencil radius transition" smodalclose="true" href="#" >Editar</a></div>`;
template.delete = `<div class="js-icon icon-notext color-yellow icon-warning al-center"></div>
<h3 class="js-title title"></h3>
<div class="ds-flex text-center" >
<a class="js-cancel btn btn-normal btn-default icon-ban radius transition" smodalclose="true" href="#">Cancelar</a>
<a class="js-confirm btn btn-normal btn-red icon-trash radius transition" smodalclose="true" href="#" >Apagar</a></div>`;
template.teste = `<h3>Titulo da Modal</h3>
<p>Um paragráfo da Modal</p>
<h3 class="js-title title"></h3>
<div class="ds-flex text-center" >
<a class="js-cancel btn btn-normal btn-default icon-ban radius transition" smodalclose="true" href="#">Cancelar</a>
<a class="js-confirm btn btn-normal btn-red icon-trash radius transition" smodalclose="true" href="#" >Apagar</a></div>`;
/*
* 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);
}Please see CONTRIBUTING for details.
Security: If you discover any security related issues, please email robsonsuzin@hotmail.com instead of using the issue tracker.
Se você descobrir algum problema relacionado à segurança, envie um e-mail para robsonsuzin@hotmail.com em vez de usar o rastreador de problemas.
Thank you
- Robson Suzin (Developer)
- All Contributors (This Rock)
The MIT License (MIT). Please see License File for more information.