Home Forums Porto Admin Template Modal with CSS animation / Delete confirmation

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #10030777

    Hello Rodrigo,
    I have table which is displaying number of users when admin click on delete button (specific row) it should ask (ope modal box) Do you want to delete hamid (username)?

    if admin click on Confirm button get value username of that row and post it via ajax to another php file so that i could delete/inactive that user from my database.
    after successfully posting values to php file return message with alert as displayed in image 3

    User deleted successfully

    please see images for more details thanks.

    Image 1
    Image 2
    Image 3

    • This topic was modified 2 months, 4 weeks ago by mushi.

    Template Version: 2.2.0


    1) You can use the table editable (probably it’s you already using).

    2) To change the modal confirm HTML, look at the source of HTML code in find this:

    <div id="dialog" class="modal-block mfp-hide">
    	<section class="card">
    		<header class="card-header">
    			<h2 class="card-title">Are you sure?</h2>
    		<div class="card-body">
    			<div class="modal-wrapper">
    				<div class="modal-text">
    					<p>Are you sure that you want to delete this row?</p>
    		<footer class="card-footer">
    			<div class="row">
    				<div class="col-md-12 text-right">
    					<button id="dialogConfirm" class="btn btn-primary">Confirm</button>
    					<button id="dialogCancel" class="btn btn-default">Cancel</button>

    * Should be above the footer JS scripts.
    * Here is where you can change the modal message.

    On the delete message you can wrap the username inside a tag, for example:

    <p>Are you sure that you want to delete thi <span class="username-confirm">hamid</span> row?</p>

    * Then you can change the <span class="username-confirm">hamid</span> trough JS when click on the delete button.

    To delete the user trough ajax when click “confirm” you need change the JS code in “examples.datatables.editable.js” on the method events(). Inside this method you will find a “magnificpopup” code that already has an ajax code:

        url: '/',
        method: 'GET',
        data: {
            id: itemId
        success: function() {
    		_self.rowRemove( $row );

    * Just edit this ajax code as per you needs.

    To show the green box with success message follow the steps below:

    1) Add the CSS of PNotify on head of page:

    <link rel="stylesheet" href="vendor/pnotify/pnotify.custom.css" />

    2) Add the JS of Pnotify on footer:

    <script src="vendor/pnotify/pnotify.custom.js"></script>

    3) On the “examples.datatables.editable.js” file change the ajax success() inside the “magnificpopup” code to:

    success: function() {
    	_self.rowRemove( $row );
    	new PNotify({
    		title: 'Success!',
    		text: 'Modal Confirm Message.',
    		type: 'success'

    We hope this helps.

    Kind Regards,


Viewing 2 posts - 1 through 2 (of 2 total)