Adding action codes on contentBox - Liferay - AUI Modal

Question

I'm trying to add some html codes on aui-modal, i'm not sure if this is the correct way, the text is appearing on modal, but the buttons are not running.

Follow my contentBox code:

<div id="contentBox" >
<h3>Title...</h3>  </br>
<p> My text... </p> </br>

<p>
    <div id="myRadiogroup">
        <input id="1" input type="button" value="1" class="nota1" >
        <input id="2" type="button" value="2" class="nota2">
        <input id="3" type="button" value="3" class="nota3">
        <input id="4" type="button" value="4" class="nota4">
        <input id="5" type="button" value="5" class="nota5">
        <input id="6" type="button" value="6" class="nota6">
        <input id="7" type="button" value="7" class="nota7">
        <input id="8" type="button" value="8" class="nota8">
        <input id="9" type="button" value="9" class="nota9">
        <input id="10" type="button" value="10" class="nota10">        
    </div>
</p>
<div class="form-group">
    <label for="comment">Commentário (opcional)</label>
    <textarea rows="3" cols="50" id="comment"></textarea>
</div>      

here aui-modal code:

YUI().use(
'aui-modal',
function(Y) {
  var modal = new Y.Modal(
  {
      contentBox: '#contentBox',
    centered: true,
    destroyOnHide: false,
    headerContent: '<h3>Pesquisa de satistação</h3>',
    modal: true,
    render: '#modal',
    resizable: {
      handles: 'b, r'
    },        
    visible: true,
    width: 450
  }
).render();

modal.addToolbar(
  [
    {           
      label: 'Cancel',
      on: {
        click: function() {
          modal.hide();
        }
      }
    },
    {
      label: 'Finish',
      on: {
        click: function() {
          alert('Information sent.');
        }
      }
    }
  ]
);

Y.one('#showModal').on(
  'click',
  function() {
    modal.show();
  }
); 
});

When I added the contentBox the modal apear like this: Image

The buttons on modal, seems like disabled, I click and nothing happen.

I'm using this reference: link

Someone can help me?

Answer 1

I don't no why, but I added one more inside the "contentBox" and everything are done.

My code are like this now:

<div id="contentBox" >

<!-- criação do action para submit -->
<portlet:actionURL name="dataSubmit" var="dataSubmit" />
<form action="<%=dataSubmit %>" method="Post">

    <div class="modal-content">

        <!-- div do header -->      
        <div class="modal-header">                  
            <img src="<%=request.getContextPath() %>/img/logo.jpg">           
        </div>

        <!-- div do body -->
        <div class="modal-body">
            My info here...

            <p>

            <!-- criação dos botões de nota -->
            <div id="myRadiogroup" class="radioClass">
                <input id="nota1" type="button" value="1" onclick="radioFunction(1)" class="nota1" >
                <input id="nota2" type="button" value="2" onclick="radioFunction(2)" class="nota2">
                <input id="nota3" type="button" value="3" onclick="radioFunction(3)" class="nota3">
                <input id="nota4" type="button" value="4" onclick="radioFunction(4)" class="nota4">
                <input id="nota5" type="button" value="5" onclick="radioFunction(5)" class="nota5">
                <input id="nota6" type="button" value="6" onclick="radioFunction(6)" class="nota6">
                <input id="nota7" type="button" value="7" onclick="radioFunction(7)" class="nota7">
                <input id="nota8" type="button" value="8" onclick="radioFunction(8)" class="nota8">
                <input id="nota9" type="button" value="9" onclick="radioFunction(9)" class="nota9">
                <input id="nota10" type="button" value="10" onclick="radioFunction(10)" class="nota10">
            </div>
            </p>

            <!-- input que recebe o valor da nota via javascript -->
            <input type='hidden' id= 'hiddenField' name='<portlet:namespace/>nota' value='' />

            <div class="form-group">
                <label for="comment">Commentário (opcional)</label>
                <textarea rows="3" cols="50" id="comment" name="<portlet:namespace/>comment"></textarea>
            </div>
        </div>

        <!-- div do rodapé -->
        <div class="modal-footer">
            <span id="closer" class="closeBtnFooter">Não quero dar feedback </span>                   
            <input id="enviar" type="Submit" class="btn btn-primary" value="Enviar feedback">
        </div>
    </div>
</form>
</div>