Okay let me confess, I was big fan of Jquery before I started using AlpineJS!. Alpine is so easy and seamless that I fell in love with it instantly. One more thing that you might wanted to consider is it’s size. Alpine is very small in comparison of Jquery, Vue, Angular etc. Alpine was previously called Tailwind of JS. If you don’t know about Tailwind, Man you should read it. If you wanted to learn about AlpineJS basics and other concepts

Modal toggle demo code using alpine

Example problem

Let’s take an exmaple to understand the things of alpine.

<div x-data="{open: false}" @keydown.escape="open=false" x-clock>
    <div class="px-8 py-8 align-center">
        <button @click="open=true" class="px-3 py-1 border shadow-md bg-indigo-500 text-white">Open Me</button>
        <div x-show="open" id="modal">
            This is modal text.  
            <br>
            <button @click="open=false" class="px-3 py-1 border shadow-md bg-red-500 text-white">Close Me</button>
        </div>
    </div>
</div>

Clicking Open Me will open div with ID modal, and clicking Close me will close this. Test this here.

Let’s try it another way

Let’s take another example

<div id="modalBox" x-data="{open: false}" @keydown.escape="open=false" x-clock> <!-- Scope starts -->
    <div class="px-8 py-8 align-center">
        <button @click="open=!open" class="px-3 py-1 border shadow-md bg-indigo-500 text-white">Toggle button</button>
        <div x-show="open" id="modal">
            This is modal text.  
            <br>
            <button @click="open=false" class="px-3 py-1 border shadow-md bg-red-500 text-white">Close Me</button>
        </div>
    </div>
</div> <!-- Scope Ends -->
<button @click="open=!open" class="px-3 py-1 border shadow-md bg-red-500 text-white">Toggle button (Second Button)</button>

Okay so in above HTML code we have created anoher button outside the scope. This is not going to work. What should we do then.

Solution approach

We need to somehow access the variable of alpine from first div using Native JS.
Well we have something called __x to tackle this problem.

Change the code of second button

<button onclick="hideBox()" class="px-3 py-1 border shadow-md bg-red-500 text-white">Toggle button (Second Button)</button>

Now what we have to do is access the data variable in this hideBox() JS function

window.hideBox = function(){
    document.getElementById('modalBox').__x.$data.open = false;
}

Here is what our whole would look like.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.8.2/dist/alpine.min.js"></script>
</head>
<body>
    <h1 class="text-2xl">Example one</h1>
    <div x-data="{open: false}" @keydown.escape="open=false" x-clock>
        <div class="px-8 py-8 align-center">
            <button @click="open=!open" class="px-3 py-1 border shadow-md bg-indigo-500 text-white">Toggle button</button>
            <div x-show="open" id="modal">
                This is modal text.  
                <br>
                <button @click="open=false" class="px-3 py-1 border shadow-md bg-red-500 text-white">Close Me</button>
            </div>
        </div>
    </div>
    <h1 class="text-2xl">Example two</h1>
    <div id="modalBox" x-data="{open: false}" @keydown.escape="open=false" x-clock>
        <div class="px-8 py-8 align-center">
            <button @click="open=!open" class="px-3 py-1 border shadow-md bg-indigo-500 text-white">Toggle button</button>

            <div x-show="open" id="modal">
                This is modal text.  
                <br>
                <button @click="open=false" class="px-3 py-1 border shadow-md bg-red-500 text-white">Close Me</button>
            </div>
        </div>
    </div>
    <button onclick="hideBox()" class="px-3 py-1 border shadow-md bg-red-500 text-white">Toggle button (Outside Scope)</button>
    <script>
        window.hideBox = function(){
            document.getElementById('modalBox').__x.$data.open = false;
        }
    </script>
</body>
</html>

Conclusion

Alpine is fairly new in this world but surely has potential to do most of the things easily. May be in future this can be done using another approach, it is also possible there is a better approach to tackle this problem 😄. But this worked for me. and I thought of sharing this one. Keep sharing.