vendredi 6 septembre 2019

laravel5.8 How to open a modal window for each item with pure javascript

I would like to open a delete confirmation modal window for each item. And I am using laravel 5.8 and pure javascript.

I succeeded to open a modal, but I need to delete an item one by one dynamically.

Here is my code. index.html

<div class="content">
        <table class="table">
            <thead>
                <th>Category</th>
            </thead>
            <tbody>  
                    @foreach($categories as $category)
                <tr>
                <td>      
                     <br>
                </td>
            <td>
                <a href=""><button btn="" class="edit-btn">Edit</button></a><br>
            </td>
            <td>
                <button  class="modalBtn"  >Delete</button><br>
            </td>      
                </tr>
                @endforeach
            </tbody>
        </table>
    </div>      

class="modalBtn" triggers a modal.

app.js

const openModal = document.querySelectorAll('.modalBtn');
const closeModal = document.getElementsByClassName('closeBtn')[0];
const modal = document.getElementById('simpleModal');

openModal.forEach(function(e) {
    e.addEventListener('click', open);
    })

closeModal.addEventListener('click', close);

window.addEventListener('click', closeOutside);

function open() {
    modal.style.display = 'block';
}

function close() {
    modal.style.display= "none";
}

function closeOutside(e) {
    if(e.target == modal){
        modal.style.display = "none";
    }
}

Thank you.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire