Search the Community

Found 1 result

1. Tuto : How to make a boostrap modal with external element
   

   tutorial Tuto : How to make a boostrap modal with external element

   ClicShopping posted a topic in Best pratices / tip / trips and training

   Hello, This tutorial help you to include a modal boostrap with an external element inside the modal without the header and the footer 1st step : Modal boostrap now we suppose you want to include a modal inside a file. For example in edit.php Add this element : the modal boostrap where you want. (Sites/Admin/Pages/Home/template/edit.php) <script> $( document ).ready(function() { $("#myModal").on("show.bs.modal", function(e) { var link = $(e.relatedTarget); $(this).find(".modal-body").load(link.attr("href")); }); }); </script> <?php //******************************** // call pop up inside Amin/Pages //********************************* ?> <a href="<?php echo $CLICSHOPPING_Manager->link('PopUp'); ?>" data-remote="false" data-toggle="modal" data-target="#myModal" class="btn btn-default">Launch Modal</a> <!-- Default bootstrap modal example --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> 2nd step : PoPup Actions In Sites/Admin/Pages/Home/Actions Create a class called PopUp.php namespace ClicShopping\Apps\Communication\PageManager\Sites\Admin\Pages\Home\Actions; use ClicShopping\OM\Registry; use ClicShopping\OM\HTML; class PopUp extends \ClicShopping\OM\PagesActionsAbstract { public function execute() { $this->page->setUseSiteTemplate(false); // ad this function inside the files $this->page->setFile('popup.php'); } } 3 th step : Popup template In Sites/Admin/Pages/Home/templates Create a class called pop_up.php <?php use ClicShopping\OM\HTML; ?> <div class="row"> <div class="col-sm-12"> <div class="panel panel-primary"> <div class="panel-heading">Heading</div> <div class="panel-body"> Put Your stuff in here <?php echo HTML::inputField('example', 'toto'); ?> </div> </div> </div> </div> That's all ! After you can continue your code with save, insert, update ...

   • September 12, 20178 yr
   • • modal
     • boostrap
     • external files