Modal Bootstrap ASP.NET

Question

Modal Bootstrap ASP.NET

Navigation

#1 by (0 votes)

0

I'm creating a mobile app using the modal bootstrap, asp.net (aspx). A href link triggers the modal and needs to send to the modal value contained in attribute of type data- * that was created. The goal is to populate a label contained in the modal at the time of its opening and this is not happening. The label fills only after the modal is opened from the 2nd attempt onwards. In the 1st attempt to open the label does not fill. When the modal is closed by clicking the "Yes" (1st attempt) and then reopening the modal, it works; clicking the "No" problem persists. Thank you if you could help.

The href link:

    <a href="#" data-toggle="modal" data-target="#myModal" data-marcacao="frase">

The script:

    <script type="text/javascript">
        $('#myModal').modal({ backdrop: 'static', keyboard: false });
        $('#myModal').modal('toggle');

        $().ready(function () {
            $("a").on("click", function (e) {
                e.preventDefault();
                $('#lblModalMarcacao').text('Marcação: ' + $(this).attr("data-marcacao"));
            });
        });
    </script>

The modal:

    <div class="modal fade" id="myModal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                </div>
                <div class="modal-body">
                    <div class="wrimagecard-topimage_header">
                    </div>
                    <asp:Label ID="lblModalMarcacao" runat="server"></asp:Label>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-success btn-md" id="myButton">Sim</button>
                    <button class="btn btn-danger btn-md" data-dismiss="modal">Não</button>
                </div>
            </div>
        </div>
    </div>

javascript jquery modal bootstrap

asked by anonymous 24.08.2017 / 04:43

1 answer

Save date and time in the database Paste value in Array chunk

score 0 · Answer 1

The <a> link was missing the closing tag .

I've removed some modal-related scripts, because the trigger occurs in the click of the link without the need for them.

Make sure the change below addresses the issue.

$().ready(function () {
    $("a").on("click", function (e) {
        e.preventDefault();                
        $('#lblModalMarcacao').text('Marcação: ' + $(this).attr("data-marcacao"));
    });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script><scriptsrc="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<a href="#" data-toggle="modal" data-target="#myModal" data-marcacao="frase">Abrir Modal</a>
    
<div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
            </div>
            <div class="modal-body">
                <div class="wrimagecard-topimage_header">
                </div>
                <asp:Label ID="lblModalMarcacao" runat="server"></asp:Label>
            </div>
            <div class="modal-footer">
                <button class="btn btn-success btn-md" id="myButton">Sim</button>
                <button class="btn btn-danger btn-md" data-dismiss="modal">Não</button>
            </div>
        </div>
    </div>
</div>