3.1 Modal Box - rukichen/GrailsGroovyLDAP GitHub Wiki

Sometimes you would like to have a Modal Box in Grails. Just a little Box filled with a Template to get some data, show some informations etc. Finding a good solution on the internet is not so easy. This is my solution:

You will need a index.gsp (this pager will be in the start point), template.gsp , one controller

in the index.gsp you will need to add a <script> part

index.gsp

function load(e) {
   $(".modal_box").load("controller/getData","status="+e)
   if(e == "open"){
      $(".modal_box").modal('show')
   }else{
      $(".modal_box").modal('hide')
   }
}

a button and a render to the template

<input type="button" value="open"  onclick="load(this.value)" />
<g:render template="controller/modalbox"/>

_modalbox.gsp

<div class="modal_box" >
   <g:if test="${clicked==1}">
      <div class="popover" id="inner_modal">
          <button type="button" class="close" onclick="load(this.value)">&times;</button>
          <h2>My Modalbox</h2>
          <input type="button" value="close"  onclick="load(this.value)" />
      </div>
   </g:if>
</div>

controller

def getData(){
   if(params.status == "open"){
      render(template: "modalbox", model: [clicked:1])
   }else{
      render(template: "modalbox", model: [clicked:0])
   }
}

For a short explanation. This script gives the data to the controller which button was pressed. It opens the modalbackground or closes it. This controller gives this information to the template modalbox. It can now decide if there is content to show or not, depending in the pressed button.

<div class="popover" id="inner_modal"> The "popover" is the overlay of the template.

$(".modal_box").modal('show') disables the background