Jquery not working properly?

Question

In my Codozan I have use an Image slider and in image I have use something like that in image caption

<div class="slide-caption slide-left">
   <div class="text-center">
   <p class=" h1 text-uppercase"><span>WHAT'S YOUR STORY?</span></p>
   <p class="nimbus-light " style="color:#fff;">A reminder of your very special place</p>
   <p class="slide-btn">
      <a id="watchnow" style="z-index: 3333;cursor:pointer">
         <span id="watchnow">WATCH NOW</span>
      </a>
   </p>
   </div>
</div>

In my phtml file i have use Jquery for popup when click then link code like below

<script>
    require(
        [
            'jquery',
            'Magento_Ui/js/modal/modal'
        ],
        function(
            $,
            modal
        ) {
            var options = {
                type: 'popup',
                responsive: true,
                innerScroll: true,
                footer:false,
            };

            var popup = modal(options, $('#chrissaint-video-slider'));
            $("#watchnow").on('click',function(){ 
                console.log("click")
                $("#chrissaint-video-slider").modal("openModal");
            });

        }
    );
</script>

after changes I have flush cache but not working what did I do wrong

Answer 1

You do not define modal body. Please define modal Like

<div id="chrissaint-video-slider" style="display:none;">
    <h1> Hi I'm here.... </h1>
</div>

Please Refer this link - How to open popup when <a> tag onClick?