All Modals

Small modals

<script>
  const handlebtnS1 = () => {
    alert("handlebtnS1 is clicked from a parent page.");
    smallModal.closeModal()
  };

  const handlebtnS2 = () => {
    alert("handlebtnS2 is clicked from a parent page.");
    smallModal.closeModal()
  };
</script>
<ModalButton id={smallModalId} btnName={btnSName} />
<SmallModal
  bind:this={smallModal}
  title={titleS}
  btn1={btnS1}
  btn2={btnS2}
  on:handlebtn1={handlebtnS1}
  on:handlebtn2={handlebtnS2}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
</SmallModal>

Medium modals

<script>
  const handlebtnM1 = () => {
    alert("handlebtnM1 is clicked from a parent page.");
    mediumModal.closeModal()
  };

  const handlebtnM2 = () => {
    alert("handlebtnM2 is clicked from a parent page.");
    mediumModal.closeModal()
  };
</script>
<ModalButton id={mediumModalId} btnName={btnMName} btnColor={btnMColor} />
<MediumModal
  bind:this={mediumModal}
  btnColor={btnMColor}
  title={titleM}
  btn1={btnM1}
  btn2={btnM2}
  on:handlebtn1={handlebtnM1}
  on:handlebtn2={handlebtnM2}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
</MediumModal>

Large modals

<script>
  const handlebtnL1 = () => {
    alert("handlebtnL1 is clicked from a parent page.");
    largeModal.closeModal()
  };

  const handlebtnL2 = () => {
    alert("handlebtnL2 is clicked from a parent page.");
    largeModal.closeModal()
  };
</script>
<ModalButton id={largeModalId} btnName={btnLName} btnColor={btnLColor} />
<LargeModal
  btnColor={btnLColor}
  title={titleL}
  btn1={btnL1}
  btn2={btnL2}
  on:handlebtn1={handlebtnL1}
  on:handlebtn2={handlebtnL2}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
</LargeModal>

Extra-large modals

<script>
  const handlebtnExL1 = () => {
    alert("handlebtnExL1 is clicked from a parent page.");
    extraLargeModal.closeModal()
  };

  const handlebtnExL2 = () => {
    alert("handlebtnExL2 is clicked from a parent page.");
    extraLargeModal.closeModal()
  };
</script>
<ModalButton
  id={extraLargeModalId}
  btnName={btnExLName}
  btnColor={btnExLColor}
/>
<ExtraLargeModal
  bind:this={extraLargModal}
  btnColor={btnExLColor}
  title={titleExL}
  btn1={btnExL1}
  btn2={btnExL2}
  on:handlebtn1={handlebtnExL1}
  on:handlebtn2={handlebtnExL2}
>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod.
</ExtraLargeModal>   

Sign-In modals

<ModalButton
  id={signinId}
  btnName={btnSignInName}
  btnColor={btnSignInColor}
/>
<SignInModal
  {btnSignInColor}
  {titleSignIn}
  {lostPasswordLink}
  {signUpLink}
  {formLink}
/>

Related components

References