Jump to content
Latest News: (loading..)
Gyakutsuki

How to make a boostrap modal with external element in 2.4

Recommended Posts

Hello,

I will have a big problem with the actual code when you want to insert a modal boostrap with a call to external files. The modal displays the header and the footer inside.

This tutorial help you to include a modal boostrap with an external element inside the modal without the header and the footer
Thank you to @Harald Ponce de Leon for this help.
I hope, it will be integrate inside the core.

1 step : include a new function
in /OM/PagesAbstract.php

just before

public function useSiteTemplate()

add

public function setUseSiteTemplate($bool)  {
  $this->use_site_template = ($bool === true);
}

2nd 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 $OSCOM_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>

 

3nd step : PoPup Actions

In Sites/Admin/Pages/Home/Actions
Create a class called PopUp.php

  namespace OSC\Apps\Communication\PageManager\Sites\Admin\Pages\Home\Actions;

  use OSC\OM\Registry;
  use OSC\OM\HTML;


  class PopUp extends \OSC\OM\PagesActionsAbstract  {

    public function execute()
    {
      $this->page->setUseSiteTemplate(false); // ad this function inside the files
      $this->page->setFile('popup.php');
    }
  }

 

4 step : Popup template

In Sites/Admin/Pages/Home/templates
Create a class called pop_up.php

<?php

  use OSC\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 ...

 

 

Edited by Gyakutsuki


Regards
-----------------------------------------
Loïc

Contact me by skype for business
Contact me @gyakutsuki for an answer on the forum

Tuto for 2.4 :
- How to Display a new page with app
- How to make Header Tags under app APP
- How to make a
boostrap modal with external element
 

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×