JSFiddle - React, Tailwind, and code Playground

by PH7Jack

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<a data-del class="btn btn-sm btn-outline-danger" href="del.php?id=<?php echo $row['id']; ?>"> <i class="mdi mdi-logout"></i> Sair</a> 



<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

JavaScript

$(document).ready(function(){
	$('a[data-del]').click(function(ev){
		var href = $(this).attr('href');
		if(!$('#confirm-Del').length){
			$('body').append('<div class="modal fade" id="confirm-Del" tabindex="-1" role="dialog"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Deseja apagar?</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> </div> <div class="modal-body"> <p>Se apagar não poderá recuperar</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-outline-danger" data-dismiss="modal">Não</button> <a id="dataDelOK" class="btn btn-outline-success">Sim</a> </div> </div> </div> </div>');
		
            }
		$('#dataDelOK').attr('href', href);
        $('#confirm-Del').modal({show: true});
		return false;
		
	});
});