When clicking on given th, open a Modal

Asked

Viewed 138 times

-2

I have a grid that displays some fields, this way:

<table id="listaNotas"
       lider-data-table="@Html.Raw(Json.Encode(Model)).ToHtmlString()"
       class="table-striped">
    <thead>
        <tr>
            <th data-field="DataCriacao" data-sortable="true" data-formatter="dateTimeFormatter">@Html.DisplayNameFor(model => model.DataCriacao)</th>
            <th data-field="Funcionario.Nome" data-sortable="true">@Html.DisplayNameFor(model => model.FuncionarioCadastro)</th>
            <th data-field="Descricao" style="cursor:pointer" data-sortable="true">@Html.DisplayNameFor(model => model.Descricao)</th>
            <th data-field="NotaId"
                data-align="center"
                data-formatter="actionFormatter"
                data-events="actionEvents"
                data-editar-action="@Url.Action("Editar", "Nota")"
                data-excluir-action="@Url.Action("Excluir", "Nota")">Ações</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

I am trying to do that when the user clicks on the Description text (not on the title, on the content (@Html.Displaynamefor(model => model. Description)), open a window (modal? container? ) that displays this Full description.

I created this window like this:

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Descrição</h4>
            </div>
            <div class="modal-body">
                @Html.DisplayNameFor(model => model.Descricao)
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
            </div>
        </div>

    </div>
</div>

How do I when the user clicks on the description, open this window?

javascript html jquery css twitter-bootstrap

1 answer

0

Here’s a simple way to do it:

$(function(){

$('#trigger').click(function(){
  $('#myModal').modal('show');
  return false;
})

});
<!DOCTYPE html>
<html>

  <head lang="en">
    <meta charset="utf-8">
    <title>Custom Plunker</title>
    
    <link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/themes/redmond/jquery-ui.css">
    <link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css">
    <link rel="stylesheet" type="text/css" href="style.css">

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.js"></script>
    <script type="text/javascript" src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/js/bootstrap.js"></script>
    <script type="text/javascript" src="app.js"></script>
    <script type="text/javascript">
      
      
    </script>
  </head>
  
  <body>

<table id="listaNotas"
       lider-data-table="@Html.Raw(Json.Encode(Model)).ToHtmlString()"
       class="table-striped">
    <thead>
        <tr>
            <th data-field="DataCriacao" data-sortable="true" data-formatter="dateTimeFormatter">@Html.DisplayNameFor(model => model.DataCriacao)</th>
            <th data-field="Funcionario.Nome" data-sortable="true">@Html.DisplayNameFor(model => model.FuncionarioCadastro)</th>
            <th data-field="Descricao" id="trigger" style="cursor:pointer" data-sortable="true">@Html.DisplayNameFor(model => model.Descricao)</th>
            <th data-field="NotaId"
                data-align="center"
                data-formatter="actionFormatter"
                data-events="actionEvents"
                data-editar-action="@Url.Action("Editar", "Nota")"
                data-excluir-action="@Url.Action("Excluir", "Nota")">Ações</th>
        </tr>
    </thead>
    <tbody></tbody>
</table>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

  </body>
</html>

Browser other questions tagged javascript html jquery css twitter-bootstrap

You are not signed in. Login or sign up in order to post.