Add pop-up notice in HTML block

Using Concrete / Help
1

Hello,
For Concreate5 version 8.5.4 and PHP version 7.4.

How to add and what is the correct syntax of using codes in HTML block?
When I am adding this code in Global Region > HTML Block
then my site covered with black colour and am not able to do anything.
Please review this code and help me fix it for fine working.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.8.2.js"></script>
<style type="text/css">
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: #000;
filter:alpha(opacity=70);
-moz-opacity:0.7;
-khtml-opacity: 0.7;
opacity: 0.7;
z-index: 100;
display: none;
}
.cnt223 a{
text-decoration: none;
}
.popup{
width: 100%;
margin: 0 auto;
display: none;
position: fixed;
z-index: 101;
}
.cnt223{
min-width: 600px;
width: 600px;
min-height: 150px;
margin: 100px auto;
background: #f3f3f3;
position: relative;
z-index: 103;
padding: 15px 35px;
border-radius: 5px;
box-shadow: 0 2px 5px #000;
}
.cnt223 p{
clear: both;
    color: #555555;
    /* text-align: justify; */
    font-size: 20px;
    font-family: sans-serif;
}
.cnt223 p a{
color: #d91900;
font-weight: bold;
}
.cnt223 .x{
float: right;
height: 35px;
left: 22px;
position: relative;
top: -25px;
width: 34px;
}
.cnt223 .x:hover{
cursor: pointer;
}
</style>
<script type='text/javascript'>
$(function(){
var overlay = $('<div id="overlay"></div>');
overlay.show();
overlay.appendTo(document.body);
$('.popup').show();
$('.close').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});


 

$('.x').click(function(){
$('.popup').hide();
overlay.appendTo(document.body).remove();
return false;
});
});
</script>
<div class='popup'>
<div class='cnt223'>
<h1>Important Notice</h1>
<p>
Today is holiday....
<br/>
<br/>
<a href='' class='close'>Close</a>
</p>
</div>
</div>

Thanks

2

Try removing the jQuery.js line. I am also not sure if the actual js code needs to be removed and placed in the theme code

3

A regular HTML block is a dangerous and fragile way to add script to a page.

  • Any error in the html or JavaScript can block you from getting back in to edit it.
  • You need to take precautions that JavaScript either does not execute or at least does not interfere with edit mode or the dashboard.

Better ways

Safe HTML is free in the marketplace. Both are v8 and v9 compatible. Script Output is also available MIT from GitHub at GitHub - Mesuva/msv_script_output: A concrete5.7+ block to control the output of ad-hoc scripts.

4

Hello @TMDesigns
Is there a better way for pop up to run on Concrete5 platform?
If yes, then how can?

Note: FREE, not from the marketplace to buy for $50 or $100 etc.

Thanks

5

Hello @TMDesigns @JohntheFish @Emilia_Mh
Thanks all getting attention on this topic.
I have found a documentation tutorial regarding “Notification”:
Here’s - How to create alert notifications and modals :: Concrete CMS

Example: display a notification with a button

echo Core::make('helper/concrete/ui')->notify(
    [
        'type' => 'info',
        'icon' => 'fa fa-question',
        'title' => t('Member Survey'),
        'text' => t('Please take a moment to fill out the yearly member survey.'),
        'buttons' => [
            sprintf('<a href="%s" class="btn btn-primary">%s</a>', \URL::to('/survey'), t('Click Here'))
        ]
    ]
);

But I’m not sure where and how to add this code?
If anyone knows then please let me know!

Thanks

6

Thanks to all,
I have done it.
Get the how to:

Thanks

2 Likes
7

Hello @Peteh2
Thanks @Peteh2 for sharing this information.