Jump to content
Sign in to follow this  

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 ...

Share this post

Link to post
Share on other sites
This topic is now closed to further replies.
Sign in to follow this  

  • Create New...

Important Information

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