Jump to content

Tuto : How to make a boostrap modal with external element

Recommended Posts


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)

  $( document ).ready(function() {
    $("#myModal").on("show.bs.modal", function(e) {
      var link = $(e.relatedTarget);

// 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 class="modal-body">
      <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>


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


3 th step : Popup template

In Sites/Admin/Pages/Home/templates
Create a class called pop_up.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'); ?>


That's all !
After you can continue your code with save, insert, update ...

Link to post
This topic is now closed to further replies.
  • Create New...

Important Information

By using this site, you agree to our Terms of Use