Open pop-up (Bootstrap) by clicking the checkbox

Question

Open pop-up (Bootstrap) by clicking the checkbox

Navigation

#1 by (1 votes)

5

I have a table, where the user selects the months that have already been checked. To perform this check, all you have to do is checkbox . However, I have a new demand, that when the user clicks the checkbox , a screen appears for it, for the user to type the date of the check. I've reviewed a few forums, and I've come to the conclusion that using Popover (Bootstrap) accomplishes what I want.

Implement an example of the usage. However, by selecting checkbox , it brings the same popover to all checkbox . I would like a way for every checkbox to have its popover .

And in addition, in this example, popover disappears when you click it. I need it to stay on the screen, for the user to select the date.

$(function () {
    // create a single access point for your popover
    var $pop = $("#CheckBoxPopover");
    
    $('.checkBoxTips input').click(function (e) {
        setPopover(this);
        e.stopPropagation();
    });
    
    $(document).click(function () {
        $pop.hide();
    });
    
    function setPopover(element) {
        setPopoverPosition(element);
        if ($(element).is(":checked")) {
            var title = $(element).attr("title");
            $pop.find("h3.popover-title").text(title);
            $pop.show();
        } else {
            var $checkedBoxes = $('.checkBoxTips input:checked')
            if ($checkedBoxes.length >0) {
                setPopover($checkedBoxes[0]);
            } else {
                $pop.hide();
            }
        }
    }
    
    function setPopoverPosition(element) {
        var offset = $(element).offset();
        $pop.css('left',offset.left + 20);
        $pop.css('top',offset.top - 25);
    }
});

.checkBoxTips input {
    display: block;
}
#CheckBoxPopover {
    -webkit-transition: all 1s ease;
       -moz-transition: all 1s ease;
        -ms-transition: all 1s ease;
         -o-transition: all 1s ease;
            transition: all 1s ease;    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scripttype="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<div class="checkBoxTips"> 
<table style="width:1149px;" id="tblPrestacao" class="cell-border table-bordered tblCompleta table-responsive">
                <thead>
                    <tr bgcolor="#F1F1F1">
                        <th><p align="center">UF</p></th>
                        <th><p align="center">Entidade</p></th>
                        <th><p align="center">Tipo</p></th>
                        <th><p align="center">1</p></th>
                        <th><p align="center">2</p></th>
                        <th><p align="center">3</p></th>
                        <th><p align="center">4</p></th>
                        <th><p align="center">5</p></th>
                        <th><p align="center">6</p></th>
                        <th><p align="center">7</p></th>
                        <th><p align="center">8</th>
                        <th><p align="center">9</p></th>
                        <th><p align="center">10</p></th>
                        <th><p align="center">11</p></th>
                        <th><p align="center">12</p></th>
                        <th><p align="center">Responsável</p></th>
                        <th><p align="center">Observação</p></th>
                    </tr>
                </thead>
                <tbody>
                        <tr>
        <td style="width: 10px"><font size="2"> <b>GO</b></font></td>
        <td style="width: 250px">
            <font size="2">
                <a class="btnEditCliente" href="#" title="Editar Cliente">C&#226;mara de Castanhal</a>
            </font>
        </td>
        <td style="width: 10px"><font size="2"> <b>A</b></font></td>
            <td bgcolor="gren"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bJaneiro é obrigatório." name="[0].Mes.bJaneiro" type="checkbox" value="true" /><input name="[0].Mes.bJaneiro" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="gren"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bFevereiro é obrigatório." name="[0].Mes.bFevereiro" type="checkbox" value="true" /><input name="[0].Mes.bFevereiro" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bMarco é obrigatório." name="[0].Mes.bMarco" type="checkbox" value="true" /><input name="[0].Mes.bMarco" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bAbril é obrigatório." name="[0].Mes.bAbril" type="checkbox" value="true" /><input name="[0].Mes.bAbril" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bMaio é obrigatório." name="[0].Mes.bMaio" type="checkbox" value="true" /><input name="[0].Mes.bMaio" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bJunho é obrigatório." name="[0].Mes.bJunho" type="checkbox" value="true" /><input name="[0].Mes.bJunho" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bJulho é obrigatório." name="[0].Mes.bJulho" type="checkbox" value="true" /><input name="[0].Mes.bJulho" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bAgosto é obrigatório." name="[0].Mes.bAgosto" type="checkbox" value="true" /><input name="[0].Mes.bAgosto" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bSetembro é obrigatório." name="[0].Mes.bSetembro" type="checkbox" value="true" /><input name="[0].Mes.bSetembro" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bOutubro é obrigatório." name="[0].Mes.bOutubro" type="checkbox" value="true" /><input name="[0].Mes.bOutubro" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bNovembro é obrigatório." name="[0].Mes.bNovembro" type="checkbox" value="true" /><input name="[0].Mes.bNovembro" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bDezembro é obrigatório." name="[0].Mes.bDezembro" type="checkbox" value="true" /><input name="[0].Mes.bDezembro" type="hidden" value="false" /></b></font></td>
        <td>User 1</td>
        <td>Sem Obs</td>
    </tr>
 <tr>
        <td style="width: 10px"><font size="2"> <b>ES</b></font></td>
        <td style="width: 250px">
            <font size="2">
                <a class="btnEditCliente" href="#" title="Editar Cliente">C&#226;mara de Brasília</a>
            </font>
        </td>
        <td style="width: 10px"><font size="2"> <b>A</b></font></td>
            <td bgcolor="gren"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bJaneiro é obrigatório." name="[0].Mes.bJaneiro" type="checkbox" value="true" /><input name="[0].Mes.bJaneiro" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="gren"><font size="1"><b><input checked="checked" data-val="true" data-val-required="O campo bFevereiro é obrigatório." name="[0].Mes.bFevereiro" type="checkbox" value="true" /><input name="[0].Mes.bFevereiro" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bMarco é obrigatório." name="[0].Mes.bMarco" type="checkbox" value="true" /><input name="[0].Mes.bMarco" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bAbril é obrigatório." name="[0].Mes.bAbril" type="checkbox" value="true" /><input name="[0].Mes.bAbril" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bMaio é obrigatório." name="[0].Mes.bMaio" type="checkbox" value="true" /><input name="[0].Mes.bMaio" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bJunho é obrigatório." name="[0].Mes.bJunho" type="checkbox" value="true" /><input name="[0].Mes.bJunho" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bJulho é obrigatório." name="[0].Mes.bJulho" type="checkbox" value="true" /><input name="[0].Mes.bJulho" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bAgosto é obrigatório." name="[0].Mes.bAgosto" type="checkbox" value="true" /><input name="[0].Mes.bAgosto" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bSetembro é obrigatório." name="[0].Mes.bSetembro" type="checkbox" value="true" /><input name="[0].Mes.bSetembro" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bOutubro é obrigatório." name="[0].Mes.bOutubro" type="checkbox" value="true" /><input name="[0].Mes.bOutubro" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bNovembro é obrigatório." name="[0].Mes.bNovembro" type="checkbox" value="true" /><input name="[0].Mes.bNovembro" type="hidden" value="false" /></b></font></td>
                    <td bgcolor="red"><font size="1"><b><input data-val="true" data-val-required="O campo bDezembro é obrigatório." name="[0].Mes.bDezembro" type="checkbox" value="true" /><input name="[0].Mes.bDezembro" type="hidden" value="false" /></b></font></td>
        <td>User 1</td>
        <td>Sem Obs</td>
    </tr>
</tbody>
</table>

</div>
     <div id='CheckBoxPopover' class="popover fade right in" style="display: hidden;">
    <div class="arrow"></div>
    <h3 class="popover-title">Entre com a Data</h3>
    <div class="popover-content">
        <input type="date"></input>
    </div>
</div>

For followers, follow this example in JSFiddle.

twitter-bootstrap popover

asked by anonymous 13.05.2015 / 19:40

1 answer

Can not assign "'Maria'": "Student.name_mae" must be a "Student" instance. When I try to access a field from the student subclass How to access a value that was put via JavaScript from a site via VBA?

score 1 · Accepted Answer

Good afternoon, @Randrade!

One solution would be for you to have a input[type="hidden"] related to every input[type="checkbox"] and work with events that Popover provides .

In this case, the moment you select a input[type="checkbox"] , the show.bs.popover event will be triggered and you can store the reference between the inputs and fill in the date. When closing the popover, the hide.bs.popover event will be fired and you can copy to the input[type="hidden"] the value of the field that was entered in the date.