Latest News: (loading..)
Gyakutsuki

How to make a boostrap modal with external element in 2.4

1 post in this topic

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
beerbee likes this

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