Bootstrap Modal ASP.NET

Question

I’m creating a mobile app using modal bootstrap, Asp.net (aspx). A href link triggers the modal and needs to send the modal value contained in a data-* attribute that has been created. The goal is to fill in 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 try onwards. In the 1st try to open the label does not fill. When the modal is closed by clicking the "yes" (1st try) and then reopening the modal, it works; clicking the "no" the problem persists. Thank you if you could help.

The link href:

    <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>

Answer 1

The link <a> was without the tag closing.

I removed some modal related scripts, because the trigger occurs in the link click without the need for these.

Check if the change below solves the problem.

$().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>
<script src="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>