Modal that closes when clicked outside, goes bottom on mobile screen and goes middle on desktop

CustomModal.js

<!-- The button to open modal -->
<label for="my-modal" class="btn modal-button">open modal</label>

<input type="checkbox" id="my-modal" class="modal-toggle" />
<label for="my-modal" class="modal modal-bottom sm:modal-middle">
  <label class="modal-box">
    <h3 class="font-bold text-lg">Congratulations random Internet user!</h3>
    <p class="py-4">You've been selected for a chance to get one year of subscription to use Wikipedia for free!</p>
    <div class="modal-action">
      <label for="my-modal" class="btn">Yay!</label>
    </div>
  </label>
</label>