I've got a modal component that looks like this:
<script>
export let open = false;
export let data = {};
export let modalID = undefined;
const closeModal = () => {
console.log("closing modal...")
open = false;
// reset all fields
data = {};
}
$: console.log(open)
</script>
{#if open}
<div class="modal" id="product-modal-{modalID}" class:modal-open={open}>
<div class="modal-box relative w-56">
<label for="product-modal-{modalID}" class="btn btn-sm btn-circle absolute right-2 top-2" on:click={closeModal}>✕</label>
<div class="bg-white">
<div class="flex items-center justify-center">
<img class="object-scale-down h-40 w-40"
src="https://media.ldlc.com/r1600/ld/products/00/05/82/02/LD0005820208_1.jpg" alt=""
/>
</div>
<div class="py-2 px-2 bg-white">
<p class="text-md font-semibold block text-gray-600">
{ data.name }
</p>
<div class="flex flex-row py-4">
<div class="pr-8 pt-2 flex justify-between">
<span class="font-semibold">-</span>
<input type="text" class="focus:outline-none bg-gray-100 border h-6 w-8 rounded text-sm px-2 mx-2" value="1">
<span class="font-semibold">+</span>
</div>
<button class="btn btn-primary btn-sm">Add</button>
</div>
</div>
</div>
</div>
</div>
{/if}
It's a fairly simple modal used at the moment to display some data. The modal is invoked from a page in which I'm dynamically displaying multiple products. When a product is clicked then the modal should appear and display the data for that specific product. It works fine for the first product I click on, but after closing the modal, if I click on any other product the modal does not appear again:
<script>
import { productSearch } from "../../lib/api/products.js";
import ProductModal from "../../lib/components/ProductModal.svelte";
let openModal = false;
let productData = {}
const openProductModal = (data) => {
console.log(data);
productData = data;
openModal = !openModal;
console.log(openModal)
}
</script>
{#if searchResults}
{#each searchResults as result (result.searchable.id)}
<div class="w-64 rounded-md overflow-hidden shadow-lg hover:scale-105 transition duration-500 bg-white">
<div class="flex items-center justify-center">
<img class="object-scale-down h-40 w-40"
src="https://media.ldlc.com/r1600/ld/products/00/05/82/02/LD0005820208_1.jpg" alt=""
/>
</div>
<div class="py-4 px-4 bg-white">
<p class="text-md font-semibold block text-gray-600 line-clamp-3 h-20 max-h-20">
{ result.searchable.name }
</p>
<div class="flex flex-row justify-between">
<p class="text-lg font-semibold text-black cursor-auto my-3">${ result.searchable.retail_price }</p>
<a href="#" on:click={openProductModal(result.searchable)} class="btn btn-circle btn-outline">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M15.75 10.5V6a3.75 3.75 0 10-7.5 0v4.5m11.356-1.993l1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 01-1.12-1.243l1.264-12A1.125 1.125 0 015.513 7.5h12.974c.576 0 1.059.435 1.119 1.007zM8.625 10.5a.375.375 0 11-.75 0 .375.375 0 01.75 0zm7.5 0a.375.375 0 11-.75 0 .375.375 0 01.75 0z" />
</svg>
</a>
</div>
</div>
</div>
{/each}
{/if}
{#if openModal}
<ProductModal open={openModal} data={productData} modalID={productData.id} />
{/if}
any idea what am i missing?
bind: is needed if changes to a passed prop should have an effect inside the parent component
<ProductModal bind:open={openModal} ... />
Related
From this code I get a 4 cards however I want to add a different photo to each card but using props I wanted to add in the path from the prop but I am getting no photo to render
I am new to react sorry if this is a silliy question I am having trouble finding a clear answer in docs.
function Case(photo) {
return (
<div className="pr-3">
<div class="max-w-sm bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img class="rounded-t-lg" src={photo} alt="" />
</a>
<div class="p-5">
<a href="#">
<h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
Noteworthy technology acquisitions 2021
</h5>
</a>
<p class="mb-3 font-normal text-gray-700 dark:text-gray-400">
Here are the biggest enterprise technology acquisitions of 2021 so
far, in reverse chronological order.
</p>
<a
href="#"
class="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-white bg-blue-700 rounded-lg hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800"
>
Read more
<svg
aria-hidden="true"
class="w-4 h-4 ml-2 -mr-1"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10.293 3.293a1 1 0 011.414 0l6 6a1 1 0 010 1.414l-6 6a1 1 0 01-1.414-1.414L14.586 11H3a1 1 0 110-2h11.586l-4.293-4.293a1 1 0 010-1.414z"
clip-rule="evenodd"
></path>
</svg>
</a>
</div>
</div>
</div>
);
}
const ShowCase = () => {
return (
<div>
<section className="flex flex row pt-12">
<Case photo={imgs / showcase1.png} />
<Case />
<Case />
<Case />
</section>
</div>
);
};
export default ShowCase;
first, import images in parent component and pass to children as a props :
import img1 from 'src1.png';
import img2 from 'src2.png';
function Parent(){
return (<>
<Children image={img1} />
<Children image={img2} />
<>);
}
then, in children component, you can use images:
function Children({image}){
return (<img src={image} />);
}
other way is using of absolute path like : https://example.com/img.png
function Parent(){
return (<>
<Children image={'http://example.com/img1.png'} />
<Children image={'http://example.com/img1.png'} />
<>);
}
Want to ask, when I click on the button above, the Dropdown menu can be closed with Tailwind CSS - ReactJS in the button above, but meanwhile I want to be able to click close the Dropdown menu via a web page other than the button, as an example in the picture with circle number 1, how do I close it? Dropdown menu besides button in my code?
Screenshot Website Dropdown menu
Code:
`
import React, { useState } from "react";
const App = () => {
const [showOptions, setShowOptions] = useState(false);
const handleClick = () => {
setShowOptions(!showOptions);
};
return (
<div class="relative inline-block text-left" onClick={handleClick} >
<div>
<button
onClick={handleClick}
type="button"
id="menu-button"
aria-expanded="true"
aria-haspopup="true"
>
<div>
<section className="inline-flex gap-1 items-center text-left cursor-pointer">
<h3 className="text-xs text-[#797979]">Welcome</h3>
<svg class="-mr-1 ml-2 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
</svg>
</section>
</div>
</button>
</div>
{showOptions ? (
<div class=" absolute right-0 z-10 mt-2 w-56 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none fixed overflow-y-auto z-[1000]" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
<div class="py-1" role="none">
<div className="items-center">
<div className="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100">
Info 1
</div>
</div>
<div className="items-center">
<div className="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100">
Info 2
</div>
</div>
<div className="items-center">
<div className="text-gray-700 block px-4 py-2 text-sm hover:bg-gray-100">
Info 3
</div>
</div>
</div>
</div>
) : null}
</div>
);
};
export default App;
`
Clicking to close the Dropdown menu via the button above has been successful and I hope that I can also close it by clicking on a button other than a web page
Bro, you can write setShowOptions(!showOptions) line as setShowOptions(current=>!current
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
I am attempting to convert a Bootstrap Jquery Modal with an ajax request into a Tailwind Css Alpine JS modal with Ajax request.
Jquery Code
$(document).on('click', 'a[data-ajax-popup="true"], button[data-ajax-popup="true"], div[data-ajax-popup="true"]', function () {
var title = $(this).data('title');
var size = ($(this).data('size') == '') ? 'md' : $(this).data('size');
var url = $(this).data('url');
$("#commonModal .modal-title").html(title);
$("#commonModal .modal-dialog").addClass('modal-' + size);
$.ajax({
url: url,
success: function (data) {
$('#commonModal .modal-body').html(data);
$("#commonModal").modal('show');
daterange_set();
taskCheckbox();
common_bind("#commonModal");
commonLoader();
},
error: function (data) {
data = data.responseJSON;
show_toastr('Error', data.error, 'error')
}
});
});
The Jquery Modal Template located in the layouts.app
<div class="modal fade" id="commonModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div>
<h4 class="h4 font-weight-400 float-left modal-title" id="exampleModalLabel"></h4>
{{__('Close')}}
</div>
<div class="modal-body">
</div>
</div>
</div>
</div>
The code to call the modal from a different blade view i.e. names.index.blade.php
<div class="col-xl-2 col-lg-2 col-md-4 col-sm-6 col-6">
<a href="#" data-url="{{ route('names.create') }}"
data-ajax-popup="true"
data-title="{{__('Create Name')}}"
class="btn btn-xs btn-white btn-icon-only width-auto">
<i class="fas fa-plus"></i> {{__('Create')}}
</a>
</div>
This is doing an ajax call to the NamesController which contains the code
public function create()
{
if(Auth::user()->can('create name'))
{
return view('names.create');
}
else
{
return response()->json(['error' => __('Permission Denied.')], 401);
}
}
I have been able to code the AlpineJs modal. However unable to wrap my head around calling the ajax functionality.
The modal code with Alpine and Tailwind
<div x-data="{ 'showModal': false }" x-cloak #keydown.escape="showModal = false">
<!-- Trigger for Modal -->
<button type="button" #click="showModal = true">Open Modal</button>
<div x-show="showModal" class="fixed inset-0 z-30 flex items-center justify-center overflow-auto bg-black bg-opacity-50">
<!-- begin::Modal content -->
<div class="sm:h-[calc(100%-5rem)] max-w-4xl my-6 mx-auto relative w-auto pointer-events-none">
<div #click.away="showModal = false"
x-transition:enter="motion-safe:ease-out duration-300"
x-transition:enter-start="opacity-0 scale-90"
x-transition:enter-end="opacity-100 scale-100"
class="max-h-full overflow-hidden relative flex flex-col w-full pointer-events-auto
bg-white bg-clip-padding rounded-md
border-none shadow-lg">
<!-- begin::Modal Header -->
<div class="flex flex-shrink-0 items-center justify-between p-4
bg-blue-200
border-b border-gray-200 rounded-t-md">
<h3 class="font-semibold text-base sm:text-xl
text-gray-50">
Modal title
</h3>
<button type="button"
#click="showModal = false"
class="text-gray-200 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="default-modal">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" viewBox="0 0 20 20" fill="currentColor">
<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" />
</svg>
</button>
</div>
<!-- end::Modal Header -->
<!-- begin::Modal Body -->
<div class="flex-auto overflow-y-auto relative p-4
dark:bg-modal-body-dark">
<p>This is some placeholder content.</p>
</div>
<!-- end::Modal Body -->
<!-- begin::Modal Footer -->
<div
class="flex flex-shrink-0 flex-wrap space-x-2 items-center justify-end p-4
bg-gray-200
border-t border-gray-200 rounded-b-md">
<button data-modal-toggle="default-modal" type="button"
class="text-gray-500 bg-white hover:bg-gray-100 focus:ring-4 focus:ring-gray-300 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">
Cancel
</button>
<button data-modal-toggle="default-modal" type="button"
class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 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>
</div>
<!-- end::Modal Footer -->
</div>
</div>
<!-- end::Modal content -->
</div>
</div>
How do I get the same Jquery functionality with the AlpineJs modal template located in the layouts.app and doing an ajax call from names.index.blade.php
I am using TailwindCSS. I have an SVG that when clicked, displays an absolute component.
<div tabIndex={0} className="relative group">
<svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 text-indigo-600 outline-none cursor-pointer" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z" />
</svg>
<div className="absolute top-0 z-50 hidden h-auto max-w-sm overflow-y-auto text-left transform translate-x-full bg-white rounded shadow-2xl max-h-60 group-focus:flex min-w-screen -right-full">
<div className="flex flex-col">
<p className="px-4 py-2 font-bold text-indigo-600 bg-indigo-100 text center">Additional Announcements</p>
<div className="flex flex-col px-4 divide-y divide-gray-200">
<div className="flex flex-col py-2 text-gray-700">
<span className="font-medium text-gray-700">{existingAnnLocalisedDate}</span>
<div className="flex">
<a className="leading-snug cursor-pointer hover:underline" href={ann.url} onClick={() => Logger({ key: "ANNOUNCEMENT_CLICKED" })} rel="noopener noreferrer" target="_blank">
{ann.headline}
</a>
{ ann.isPriceSensitive && (
<span className="inline-flex items-center justify-center w-auto h-auto ml-1 font-medium text-center cursor-default" title="Price sensitive">
💰
</span>
)}
</div>
</div>
</div>
</div>
</div>
</div>
This works as expected, however when I click an <a href="" /> element, it doesn't actually open that link - it just drops the focus on that component. How can I make it so that not only does it drop the focus, but it also opens the link in a new tab, as the code suggests?
Thank you!