We Keep Coding

How to dim a component when a modal is pop out (Tailwind Flowbite)?

I want to ask. I have a layout, there is a button when i click the button, a pop up will appear, the problem is when the modal appears, there are some components that are not dimmed, such as the button and the navbar as shown in the picture, I use vue cli and tailwind and for the modal I use flowbite. I've been looking for a way but still can't find it. Can anyone help me?
My website currently has a mobile-based display
this the web without modal
and this is the web when the button is clicked
here is the code in navbarWhite.vue
<template>
<header class="sticky h-14 top-0 z-50 bg-white" :class="boxShadow">
<div class="flex flex-row">
<div class="absolute" v-if="srcPictureLeft">
<img
#click="onClickBack"
class="ml-7 py-4 cursor-pointer text-black"
:src="require(`../assets/icon/${srcPictureLeft}`)"
/>
</div>
<div v-else></div>
<div class="py-4 relative mx-auto font-semibold text-black text-xl">
{{ title }}
</div>
</div>
</header>
</template>
<style>
</style>
<script>
export default {
name: "NavbarWhite",
props: {
onClickBack: {
type: Function,
},
title: String,
srcPictureLeft: String,
boxShadow: String,
},
};
</script>
and this is the button component (ButtonBottom.vue)
<template>
<div
class="
sticky
w-full
absolute
mb-0
bottom-0
z-50
bg-white
h-16
drop-shadow-[0_0_4px_rgba(0,0,0,0.25)]
"
>
<div class="mx-[30px] py-2">
<button-primary
class="
bg-green-button
text-white
hover:bg-green-button-darker hover:rounded-[32px]
"
>
<slot>Button</slot>
</button-primary>
</div>
</div>
</template>
<script>
import ButtonPrimary from "#/components/ButtonPrimary.vue";
export default {
name: "ButtonBottom",
components: {
ButtonPrimary,
},
};
</script>
and this is the parent where all the component called
<template>
<div class="h-screen relative">
<div class="h-[94%]">
<navbar-white
boxShadow="shadow-[0_0_10px_0_rgba(0,0,0,0.25)]"
srcPictureLeft="backIconBlack.svg"
:onClickBack="goBack"
title="Ringkasan Transaksi"
/>
<div class="mt-10 mx-[30px]">
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">No. Rekening</div>
<div>12345678</div>
</div>
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">Nama Penerima</div>
<div>Lorem Ipsum</div>
</div>
<div class="flex flex-row justify-between mb-4">
<div class="font-semibold">Bank Tujuan</div>
<div>12345678</div>
</div>
<hr class="mb-4" />
<div class="flex flex-row justify-between mb-7">
<div class="font-semibold">Nominal</div>
<div>Rp 200.000</div>
</div>
<div class="flex flex-row justify-between mb-4">
<div class="font-semibold">Fee</div>
<div>Rp 2.500</div>
</div>
<div class="flex flex-row justify-between">
<div class="font-semibold">Total</div>
<div class="font-semibold">Rp 202.500</div>
</div>
</div>
</div>
<button-bottom data-modal-toggle="biayaAdmin">Selanjutnya</button-bottom>
<!-- modal start here -->
<div
id="biayaAdmin"
tabindex="-1"
class="
hidden
overflow-y-auto overflow-x-hidden
fixed
top-0
right-0
left-0
z-50
w-full
md:inset-0
h-modal
md:h-full
"
>
<div class="relative p-4 w-full max-w-md h-full md:h-auto">
<!-- Modal content -->
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
<!-- Modal header -->
<div
class="
flex
justify-between
items-center
p-5
rounded-t
border-b
dark:border-gray-600
"
>
<h3 class="text-xl font-medium text-gray-900 dark:text-white">
Small modal
</h3>
<button
type="button"
class="
text-gray-400
bg-transparent
hover:bg-gray-200 hover:text-gray-900
rounded-lg
text-sm
p-1.5
ml-auto
inline-flex
items-center
dark:hover:bg-gray-600 dark:hover:text-white
"
data-modal-toggle="biayaAdmin"
>
<svg
aria-hidden="true"
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
<span class="sr-only">Close modal</span>
</button>
</div>
<!-- Modal body -->
<div class="p-6 space-y-6">
<p
class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
>
With less than a month to go before the European Union enacts new
consumer privacy laws for its citizens, companies around the world
are updating their terms of service agreements to comply.
</p>
<p
class="text-base leading-relaxed text-gray-500 dark:text-gray-400"
>
The European Union’s General Data Protection Regulation (G.D.P.R.)
goes into effect on May 25 and is meant to ensure a common set of
data rights in the European Union. It requires organizations to
notify users as soon as possible of high-risk data breaches that
could personally affect them.
</p>
</div>
<!-- Modal footer -->
<div
class="
flex
items-center
p-6
space-x-2
rounded-b
border-t border-gray-200
dark:border-gray-600
"
>
<button
data-modal-toggle="biayaAdmin"
type="button"
class="
text-white
bg-blue-700
hover:bg-blue-800
focus:ring-4 focus:outline-none focus:ring-blue-300
font-medium
rounded-lg
text-sm
px-5
py-2.5
text-center
dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
"
>
I accept
</button>
<button
data-modal-toggle="biayaAdmin"
type="button"
class="
text-gray-500
bg-white
hover:bg-gray-100
focus:ring-4 focus:outline-none focus:ring-gray-200
rounded-lg
border border-gray-200
text-sm
font-medium
px-5
py-2.5
hover:text-gray-900
focus:z-10
dark:bg-gray-700
dark:text-gray-300
dark:border-gray-500
dark:hover:text-white
dark:hover:bg-gray-600
dark:focus:ring-gray-600
"
>
Decline
</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import ButtonBottom from "#/components/ButtonBottom.vue";
import NavbarWhite from "#/components/NavbarWhite.vue";
export default {
name: "TransactionSummary",
components: {
ButtonBottom,
NavbarWhite,
},
methods: {
goBack() {
this.$router.go(-1);
},
},
};
</script>

The css z-index of your header and footer might be higher than the z-index of the overlay mask.
Try inspecting the elements and evaluate their z-index values, try forcing new values to ensure that the z-index of the header and footer is a lower value than the grey overlay mask.
The issue might be the lack of a z-index value on some of those elements to indicate which should appear over the top of another.
https://www.w3schools.com/cssref/pr_pos_z-index.asp

Display modal only once (do not reset state on page refresh/redirect)

I am trying to implement a simple age verification modal in a react app that I would like to launch only once; when a user first accesses my app. However, currently the modal pops up every time the page is refreshed or a redirect to a new page is clicked and I cannot stop this from happening even though I have coded the state to be set open once the confirm button is clicked.
The code for my modal component is as follows;
import { Fragment, useRef, useState } from 'react'
import { Dialog, Transition } from '#headlessui/react'
import { ExclamationTriangleIcon } from '#heroicons/react/24/outline'
import Modal from 'react-modal';
export default function Example() {
const [open, setOpen] = useState(true)
return (
<Transition.Root show={open} as={Fragment}>
<Dialog as="div" className="relative z-10" onClose={() => null}>
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0"
enterTo="opacity-100"
leave="ease-in duration-200"
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" />
</Transition.Child>
<div className="fixed inset-0 z-10 overflow-y-auto">
<div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
<Transition.Child
as={Fragment}
enter="ease-out duration-300"
enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
enterTo="opacity-100 translate-y-0 sm:scale-100"
leave="ease-in duration-200"
leaveFrom="opacity-100 translate-y-0 sm:scale-100"
leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
>
<Dialog.Panel className="relative transform overflow-hidden rounded-lg bg-white text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
<div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div className="sm:flex sm:items-start">
<div className="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10">
<ExclamationTriangleIcon className="h-6 w-6 text-red-600" aria-hidden="true" />
</div>
<div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
<Dialog.Title as="h3" className="text-xl font-medium leading-6 text-gray-900">
Age Verification
</Dialog.Title>
<div className="mt-2">
<p className="text-md text-gray-500">
You must be over 18 to enter.
</p>
</div>
</div>
</div>
</div>
<div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
<button
type="button"
className="inline-flex w-full justify-center rounded-md border border-transparent bg-purple-600 px-4 py-2 text-base font-medium text-white shadow-sm hover:bg-green-600 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 sm:ml-3 sm:w-auto sm:text-sm"
onClick={() => setOpen(false)}
>
Confirm
</button>
</div>
</Dialog.Panel>
</Transition.Child>
</div>
</div>
</Dialog>
</Transition.Root>
)
}
Can help me with how I could set the state to be closed on first launch and then to open once 'confirm' is clicked and have it stay that way?
Thank you

How can I align my text and put the button on the extrem right of my gray bar?

how can I display my Invitee2 a bit upper in my gray bar ? And for my button how can I put it on the extrem right side of my gray bar ?
<div className="bg-gray-200 p-5 h-5 pl-2 mb-2 text-md text-primary-500 font-bold text-gray-500">
Invitee {i + 1}
<span className="float-right -mt-5">
{!!i && (
<Button primary className="rounded-md float-right mt-4" onClick={() => removeInvitee(pId)}>
- Invitee
</Button>
)}
</span>
And Button.jsx:
export default function Button({ onClick,primary,children,disabled }) {
return <button
onClick={onClick}
className={`${primary
? ' cursor-pointer rounded-md bg-primary-700 py-2 px-3 text-white hover:bg-blue-700 hover:text-white'
: 'bg-transparent text-gray border border-primary-500 hover:border-primary-100 hover:text-primary-100 transition duration-200 '}
text-primary-fg py-2 px-3 rounded-md transition-colors `}
disabled={disabled}
>{children}</button>
}
Here a picture to get the idea :

Add flex flex-row justify-between items-center in your div class
and remove the -mt-5 in span class beside float-right
check the code below
<div className="flex flex-row justify-between items-center bg-gray-200 p-5 h-5 pl-2 mb-2 text-md text-primary-500 font-bold text-gray-500">
Invitee {i + 1}
<span className="float-right">
{!!i && (
<Button primary className="rounded-md float-right mt-4" onClick={() => removeInvitee(pId)}>
- Invitee
</Button>
)}
</span>
</div>

You can use the flexbox properties to make the design you want. I had created the very similar example below , please add your functions here and replace class with className.
<script src="https://cdn.tailwindcss.com"></script>
<div class="container mx-auto py-4">
<div class="bg-gray-200 text-md flex items-center justify-between rounded-r-md">
<div class=" font-bold text-gray-500 ml-4" >Invitee 2</div>
<div class="">
<Button primary class="rounded-md bg-black text-white py-2 px-4" onclick="removeInvitee(pId)">
- Invitee
</Button>
</div>
</div>
</div>

Modal doesn't open on all buttons

As my title already says, I have an issue with a modal not opening on all buttons.
Here is the situation:
I have a page that displays all applications a user has sent for different jobs. So it may be just one, or up to whatever.
It looks like this:
Now if the user wants to cancel the application he can press the button "Bewerbung zurückziehen", then the modal opens to give a heads up that all data will be lost and if he is sure, in the modal he can confirm it or go back. Everything works fine for the first post on the site, but for all other posts just nothing happens, so the modal doesn't open.
Here is my code:
The blade file that displays all posts:
#foreach($bewerbungen as $bewerbung)
#foreach($stellenanzeigen_names as $stellenanzeigen_name)
#if($bewerbung->Stellenanzeigen_ID === $stellenanzeigen_name->Stellenanzeigen_ID)
<div
class="p-10 grid-cols-3 grid-rows-3 gap-4 shadow-2xl mb-10 bg-gradient-to-r from-green-400 to-blue-500 border-solid border-2 border-black rounded-lg">
<!--Card 1-->
<div
class="overflow-hidden row-span-3 bg-gray-100 shadow-2xl border-solid border-2 border-gray-500 rounded-lg">
<div class="pt-4 pl-4">
{{ $stellenanzeigen_name->Titel }}
<hr class="border-black">
</div>
<div class="pt-4 pl-8 font-medium text-xl font-bold font-serif">
ID der Bewerbung: {{ $bewerbung->Bewerbung_ID }}</div>
<div class="pt-4 pl-8 pb-3 font-medium text-xl font-bold font-serif">
ID der Stellenanzeige: {{ $bewerbung->Stellenanzeigen_ID }}</div>
<div class="w-1/4 mb-4 pl-4">
<div class="font-medium text-base font-bold font-serif mb-4 pb-3">
<button type="submit" id="delete_appl_btn" name="delete_appl_btn"
class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
Bewerbung zurückziehen
</button>
</div>
</div>
</div>
</div>
#endif
#endforeach
#endforeach
Here is the code for the modal:
<div id="delete_application_modal" class="modal fixed ml-96 top-20 mx-auto p-5 border w-96 shadow-lg rounded-md bg-white hidden">
<div class="mt-3 text-center text-xl">
Bewerbung zurückziehen
<div class="text-center text-sm mt-4">
</div>
</div>
<div class="items-center px-4 py-3">
<label for="delete_application" class="sr-only">Bewerbung zurückziehen</label>
<form action="{{ route('delete', $bewerbung->Bewerbung_ID) }}" method="post">
#csrf
<button type="submit" id="ok_btn" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
Bewerbung zurückziehen
</button>
</form>
</div>
<div class="items-center px-4 py-3">
<button id="back_btn_tel" class="mb-4 pb-3 w-full text-white px-4 py-3 rounded text-base font-medium
bg-gradient-to-r from-green-400 to-blue-500 float-right shadow transition
duration-500 ease-in-out transform hover:-translate-y-1 hover:scale-100
shadow-2xl border-2 w-full p-4 rounded-lg">
zurück
</button>
</div>
</div>
#if(session()->has('message'))
<div class="alert alert-success">
{{ session()->get('message') }}
</div>
#endif
<script>
var delete_appl_modal = document.getElementById("delete_application_modal");
var open_modal = document.getElementById("delete_appl_btn");
var back_btn = document.getElementById("back_btn_tel");
open_modal.onclick = function () {
delete_appl_modal.style.display = "block";
}
back_btn.onclick = function () {
delete_appl_modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
delete_appl_modal.style.display = "none";
}
}
</script>
Honestly, I have zero clue why it works for the first but not for the others, they have the same buttons, with the same name, id & everything.
Maybe one of you had a similar issue. I wish you all happy holidays!
Edit:
New code to open the modal:
<script>
var delete_appl_modal = document.querySelector('#cancel_appl_modal');
var open = document.querySelector('#open_btn');
var back_btn = document.querySelector('#back_btn_tel');
open.onclick = function () {
delete_appl_modal.style.display = "block";
}
back_btn.onclick = function () {
delete_appl_modal.style.display = "none";
}
window.onclick = function (event) {
if (event.target == modal) {
delete_appl_modal.style.display = "none";
}
}
</script>
When I use querySelectorALl then the first one doesn't work anymore as well

The id property is expected to be unique within a page, so when using getElementById once an element with that id has been located it doesn't continue searching for others.
As you have multiple button elements that you want to target, you will need to us something like querySelectorAll or getElementsByClassName to target every element that should trigger the modal to open.
An example to get you on the right direction.
<button class="open-modal">Button A</button>
<button class="open-modal">Button B</button>
<button class="open-modal">Button C</button>
let buttons = document.querySelectorAll('.open-modal');
buttons.forEach(button => {
button.addEventListener('click', function (event) {
// this is where you would open the modal
// delete_appl_modal.style.display = 'block';
console.log(event.target.innerHTML);
})
});
Example JSFiddle

Accessing current data iteration from parent component

I want to access current data iteration from template, and also I need certain id's from iterated element.
<template x-for="(datas, idx) in data">
<tr x-bind:class="idx % 2 == 0 ? 'bg-white' : 'bg-green-100'" class="border-4 border-gray-200">
<td class="text-center py-2 w-2">
<span x-text="`${parseInt(idx) + 1}`"></span>
</td>
<td class="text-center py-2">
<strong x-text="datas.name"></strong>
<br />
<i x-text="`Num : ${datas.num}`"></i>
</td>
<td class="text-center py-2" >
<!--I need access datas.num in this area v--->
<div #click.away="open = false" class="relative" x-data="{open : false}">
<button #click="open = !open" class="bg-gray-300 flex flex-row items-center w-full px-4 py-2 mt-2 text-sm font-semibold text-left bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:focus:bg-gray-600 dark-mode:hover:bg-gray-600 md:w-auto md:inline md:mt-0 md:ml-4 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline">
<span>Action</span>
<svg fill="currentColor" viewBox="0 0 20 20" :class="{'rotate-180': open, 'rotate-0': !open}" class="inline w-4 h-4 mt-1 ml-1 transition-transform duration-200 transform md:-mt-1"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
</button>
<div x-show="open" x-transition:enter="transition ease-out duration-100" x-transition:enter-start="transform opacity-0 scale-95" x-transition:enter-end="transform opacity-100 scale-100" x-transition:leave="transition ease-in duration-75" x-transition:leave-start="transform opacity-100 scale-100" x-transition:leave-end="transform opacity-0 scale-95" class="absolute right-0 w-full mt-2 origin-top-right rounded-md shadow-lg md:w-48" style="z-index: 1;">
<div class="px-2 py-2 bg-white rounded-md shadow dark-mode:bg-gray-800">
<a class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-gray-900 focus:text-gray-900 hover:bg-gray-200 focus:bg-gray-200 focus:outline-none focus:shadow-outline" href="#"><i class="fas fa-pencil-alt"></i> Edit</a>
<a #click="$parent.deleteData(datas.num)" class="block px-4 py-2 mt-2 text-sm font-semibold bg-transparent rounded-lg dark-mode:bg-transparent dark-mode:hover:bg-gray-600 dark-mode:focus:bg-gray-600 dark-mode:focus:text-white dark-mode:hover:text-white dark-mode:text-gray-200 md:mt-0 hover:text-white-900 focus:text-white-900 hover:bg-red-200 focus:bg-red-200 focus:outline-none focus:shadow-outline" href="#"><i class="fas fa-trash-alt"></i> Delete</a>
</div>
</div>
</div>
</td>
</tr>
</template>
and here's data definition :
function dataInit(){
return {
data : [
{
num : 10,
name : "josh"
}
],
deleteData(id){
//do something with current id selection
}
}
}
I do can access method of deleteData(id) in parent because using Alpine's magic helper, but I can't access datas.num or $parent.deleteData(datas.num) variable in loop block even they're inside template block. How do I resolve this problem?
Edit :
*Assuming the x-data for data loop is already set in upper element
** What I meant is that, I want to access the x-for in child element ( see comments on html's section). But I can't access it, maybe some scope problems that prevent me to do it. Starting in this area <div #click.away="open = false" class="relative" x-data="{open : false}">

Your deleteData function is within an object, so referring to other elements within that object requires this to refer to itself:
deleteData(id) {
let data = this.data;
}
will return the data variable.
Another thing, you've defined data as an array of objects. So, to access the num variable, you'd have to first access that specific object within the array, and then you can get the num value:
this.data[0].num should do the trick.
P.S. your code snippet is missing one closing bracket (})
Within Alpine, you don't need to refer to the object, since you should be setting it as x-data somewhere, from which you can then do whatever you wish with the data.
<div x-data="dataInit()">
<!-- Loop the array of data -->
<template x-for="singleData in data">
<div>
<span x-text="singleData.num"></span>
</div>
</template>
</div>