Skip to main content

Popup and clickable button to view popup

Inside blade
@section('csssec')
<link rel="stylesheet" href="{{ asset('assets/popup.css') }}">



@endsection
@section('jssec')
<script src="{{ asset('assets/popup.js') }}"></script>

@endsection
<div class="load-popup">
<div class="popup-body">
<div class="card-header">
<h4>Title</h4><br>
<p>Description</p>
</div>
<div class="content">
{{-- <img src="{{asset('/banner_upload/'.$banner->image)}}" alt="report"> --}}
<h1>Content will be here</h1>
</div>
<span class="close-icon"><i class="fa fa-close"></i></span>

</div>
</div>
<div class="popup-icon">
<span><i class="fa fa-reply"></i></span>
</div>

 Popup.css

.popup-icon {
position: fixed;
top: 50%;
right: 0;
z-index: 10001;
width: 50px;
height: 50px;
text-align: center;
line-height: 50px;
color: #ffffff;
border-radius: 30px 0 0 30px;
background-color: #e10707;
display: none;
cursor: pointer;
-webkit-animation: pulse 1.5s infinite;
-moz-animation: pulse 1.5s infinite;
animation: pulse 1.5s infinite; }
@-webkit-keyframes pulse {
0% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 7, 7, 0.5); }
70% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 7, 7, 0.5); }
100% {
-webkit-box-shadow: 0 0 0 0 rgba(255, 7, 7, 0.5); } }
@keyframes pulse {
0% {
-moz-box-shadow: 0 0 0 0 rgba(255, 7, 7, 0.5);
box-shadow: 0 0 0 0 rgba(255, 7, 7, 0.5); }
70% {
-moz-box-shadow: 0 0 0 10px rgba(255, 7, 7, 0.5);
box-shadow: 0 0 0 10px rgba(255, 7, 7, 0.5); }
100% {
-moz-box-shadow: 0 0 0 0 rgba(255, 7, 7, 0.5);
box-shadow: 0 0 0 0 rgba(255, 7, 7, 0.5); } }
@media screen and (max-width: 480px) {
.popup-icon {
display: none !important; } }

.load-popup {
display: none;
position: fixed;
z-index: 10001;
left: 0;
top: 0;
height: 100%;
width: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.6); }
.load-popup .popup-body {
height: auto;
width: 80%;
max-width: 600px;
margin: 5% auto;
display: block;
border-radius: 8px;
-moz-box-shadow: 0 0 5px #000;
-webkit-box-shadow: 0 0 5px #000;
box-shadow: 0 0 5px #000;
padding: 20px;
background-color: #ffffff;
position: relative; }
.load-popup .popup-body .content {
text-align: center; }
.load-popup .popup-body .close-icon {
position: absolute;
right: -20px;
top: -20px;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
color: #ffffff;
background-color: #e10707;
border-radius: 50%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
z-index: 10002;
cursor: pointer; }
.load-popup .popup-body .popup-btn {
margin-top: 15px; }

 popup.js
(function(jQuery) {
"use strict";
$(window).on('load', function() {
$('.load-popup').fadeIn(5000);
});
$(document).ready(function() {

/*====================================
// close popup
======================================*/
$('.close-icon').on('click', function() {
$('.load-popup').fadeOut(200);
$('.popup-icon').fadeIn();
});

/*====================================
// popup icon
======================================*/
$('.popup-icon').on('click', function() {
$('.load-popup').fadeIn(200);
$('popup-icon').fadeOut();
})
});
})(jQuery);



Comments

Post a Comment

Popular posts from this blog

Installing Admin LTE in Laravel

step 1:  Reference---  https://hdtuto.com/article/laravel-56-adminlte-bootstrap-theme-installation-example Step 2 : after completion first reference view this link:    https://github.com/JeroenNoten/Laravel-AdminLTE step 3:  For more additional information view this link:   https://github.com/jeroennoten/Laravel-AdminLTE#2-updating Now you are done statically : https://adminlte.io/blog/integrate-adminlte-with-laravel Steps: 1:  composer require jeroennoten/laravel-adminlte 2: 'providers' => [ .... JeroenNoten\LaravelAdminLte\ServiceProvider::class, ], 3: php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=assets 5: php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=config 6: php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\ServiceProvider" --tag=views 7: for admin pannel php artisan ...
Post a Comment
Read more

Integration of adminlte admin pannel in laravel 6 adn above

Create new laravel project : laravel new projectname --auth Steps to integrate admin pannel i.e. adminlte 1.  composer require jeroennoten/laravel-adminlte 2.  php artisan adminlte:install 3.  php artisan adminlte:install --only=auth_views 4. php artisan vendor:publish --provider="JeroenNoten\LaravelAdminLte\AdminLteServiceProvider" --tag=views Filemanager: https://unisharp.github.io/laravel-filemanager/installation 1.  composer require unisharp/laravel-filemanager:~1.8 php artisan vendor:publish --tag = lfm_config php artisan vendor:publish --tag = lfm_public 3.  php artisan route:clear php artisan config:clear you will get a problem regarding file relode after upload and to solve do this fix it on vendor\unisharp\laravel-filemanager\src\Controllers\UploadController.php replace line 60 return count($this->errors) > 0 ? $this->errors : parent::$success_response; by return count($this->errors) > 0 ? ...
Post a Comment
Read more

Setting and Getting Cookie and Session in laravel

First of all lets discuss many ways to set cookies inside controller : $response = new Response ( redirect ( 'news' )); //$minute=5; // $response->withCookie(cookie('name', 'virat', $minutes)); $response -> withCookie ( cookie ()-> forever ( 'news_id' , $newsid )); return $response ; // or // Cookie::queue('news_id', $news_id, 15); // return redirect('news'); // or // return redirect('news')->withCookie(cookie('name', 'virat', $minutes)); use Illuminate\Support\Facades\ Request ; use Illuminate\Http\ Response ; use Illuminate\Support\Facades\ Cookie ; To get cookies: inside controller $val = Request :: cookie ( 'news_id' ); // dd($val); $v = Cookie :: get ( 'news_id' ); // dd($v); or $value = $request -> cookie ( 'name' ); in blade: {{ Cookie :: get ( 'news_id' ) }} Now lets see for session: Ref...
Post a Comment
Read more