problem when calling modal

Question

I’m starting to learn about modal, so I looked for some examples and found one that would help me in what I need, but this with some mistake that I can’t identify. The code is this:

<a href="delete.php?id=<?php echo $id; ?>" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal" data-customer="<?php echo $id; ?>"><i class="fa fa-trash"></i> Excluir</a>

But instead of opening modal.php it opens index.php.

If I do one of these two ways it opens the modal, only it doesn’t get the id.

<a href="#myModal" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal" data-customer="<?php echo $id; ?>"><i class="fa fa-trash"></i> Excluir </a>

or

<a class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal" data-customer="<?php echo $id; ?>"><i class="fa fa-trash"></i> Excluir </a>

**Obs.:

• Where I found this example many managed to run the code.

• The variable $id picks up a selected id from the database (without the modal working perfectly).

• The delete.php function is working perfectly without the modal.**

Answer 1

use the API .date() jQuery to recover the id

<a href="#myModal" ... data-customer="<?php echo $id; ?>"> ...

valorId = $(this).data('customer');

Example - complete code

Library

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

Script

<script language="javascript">
$(document).on("click", ".btn-danger", function () {
     valorId = $(this).data('customer');
     $(".modal-footer").html( '<a href="delete.php?id='+valorId+'" class="btn btn-success waves-effect waves-light"> Excluir </a> <button type="button" class="btn btn-primary" data-dismiss="modal"><span class="glyphicon glyphicon-ok-sign"></span> Cancelar</button>' );
     $('#myModal').modal('show');          
});
</script>

HTML

<a href="#myModal" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#myModal" data-customer="<?php echo $id; ?>"><i class="fa fa-trash"></i> Abrir Modal </a>

<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Excluir id</h4>
            </div>
            <div class="modal-body">
             ............
             ............
            </div>
            <div class="modal-footer">

            </div>
        </div>
    </div>
</div>