title: How can display success message in popup?
body: <p>I am display success message in div of id=ajax-alert but my aim is to display this message in popup and after displaying this message in within some time popup will hide. I am confused how i am display success message in popup. How i am creating popup and how it is disable in some time? </p>
  
  <p>View:</p>
  
  <pre><code>&lt;div id="ajax-alert" class="alert" style="display:none"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>controller:</p>
  
  <pre><code> public function add_to_wishlist(Request $req)
      {
           $userId=Session::get('userid');
           if(empty($userId))
           {
              return response()-&gt;json(['status'=&gt; 1]);
           }
           else
           {
              $checkWishlist=DB::select('select * from wishlist where user_id=? &amp;&amp; product_id=?',[$userId,$req-&gt;sub_id]);
               if($checkWishlist)
               {
                 DB::table('wishlist')-&gt;where('user_id',$userId)-&gt;where('product_id',$req-&gt;sub_id)-&gt;delete();
  
                 return response()-&gt;json(['status'=&gt; 2,'message'=&gt;'item is removed from wishlist']);              
               }
               else
               {
                DB::table('wishlist')-&gt;insert(['user_id'=&gt;$userId,'product_id'=&gt;$req-&gt;sub_id]);
  
                return response()-&gt;json(['status'=&gt; 3,'message'=&gt;'item is added in wishlist']);
               }
           }
      }
  </code></pre>
  
  <p>script:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
    $(document).ready(function(){
    $('.sub').click(function(e) { 
  
      var sub_id=$(this).attr('data-id');
      var input=$(this).prev();
      e.preventDefault()
                 $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                    }
                });
           jQuery.ajax({
  
                    url: "{{ url('/add-to-wishlist') }}",
                    method: 'get',
                    data: {
                       sub_id: sub_id,
                    },
                    success: function(result){
                      if(result.status==1)
                      {
                         window.location.href="/login";
                      }
                      else if(result.status==2)
                       {
                          //$('a[data-id="' + sub_id + '"] &gt; i.whishstate').css({"color":"grey"});
  
                          $('a[data-id="' + sub_id + '"] &gt; i.whishstate').removeClass("add");
                          $('a[data-id="' + sub_id + '"] &gt; i.whishstate').addClass("remove");
  
                          $('#ajax-alert').addClass('alert-success').show(function(){
                            $(this).html(result.message);
                           });
  
                       }
                       else if(result.status==3)
                       {
                          //$('a[data-id="' + sub_id + '"] &gt; i.whishstate').css({"color":"#FBA842"});
  
                          $('a[data-id="' + sub_id + '"] &gt; i.whishstate').removeClass("remove");
                          $('a[data-id="' + sub_id + '"] &gt; i.whishstate').addClass("add");
  
                            $('#ajax-alert').addClass('alert-success').show(function(){
                             $(this).html(result.message);
                           });
  
                       }
                    }});
  
    });
   });
  
  &lt;/script&gt;
  
  @endsection
  </code></pre>