Pop-up Panel for Text

Hopefully @Norm can add more Panel Options like this… Pop-up Panel…

1 Like

Yes!

I would really love to have pop ups (modal) with the the ability to add HTML in it, perhaps even add many of the BRIC components in a lightbox modal.

And also the option to open a lightbox popup from a text link would be great!

@mackyangeles
I’ve done some test with this in blocs and are happy with how it works.
You can put any html code in it and style it how ever you like.
I plan to make a tutorial on it soon.

@Fubals
Here’s a video tutorial on adding lightbox with text or image link.
You can have Vimeo/Youtube, images, google maps and html in the lighbox.

Here’s the codes used in the video.
http://bit.ly/2wkG8MG

Cheers / Johny

8 Likes

This is great!
How can this (the blue demo) be done? Did you also use Lity for this?

Thx!

I’m new to Blocs, but bootstrap has a Modal built in. I haven’t found a Bric that uses it.

If your comfortable working with a little code, You can add the following code to an HTML widget Bric:

<h2>Modal Example</h2>
 <!-- Trigger the modal with a button -->
 <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<div class="modal fade" id="myModal" role="dialog" style="display: none;">
   <div class="modal-dialog" style="margin-top: 154.5px;">
   
     <!-- Modal content-->
     <div class="modal-content">
       <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal">×</button>
         <h4 class="modal-title">Modal Header</h4>
       </div>
       <div class="modal-body">
         <!--  -->
         <!--  -->
          <!-- enter your html text to display in modal window here -->
         <!--  -->
         <!--  -->
         <h3>Some heading text in the modal.</h3>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In eu ipsum vitae lorem viverra ornare non id augue. Morbi eu dapibus odio. Quisque eleifend risus sed massa dictum, et tempus massa cursus. Suspendisse posuere rhoncus sapien non lobortis. Pellentesque laoreet lobortis sodales. Donec mollis erat a congue vestibulum. Ut dictum maximus dolor id posuere. Suspendisse potenti. Curabitur sit amet ligula molestie, gravida velit sit amet, luctus diam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquam accumsan nisi, sit amet varius nibh varius ut.</p>
       </div>
       <div class="modal-footer">
         <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
       </div>
     </div>
     
   </div>
 </div>

GREAT! This worked … thanks!

I did not use your button but added the following JS code to the footer …

<script>
$("#button-a, #button-b").click(function() {
  $("#myModal").modal({ keyboard: true })
})
</script>

The modal is then opened from the buttons with the ID button-a and button-b.

1 Like

@mackyangeles @Fubals @mikeh @teefers

Sorry, i’ve been swamped with work and totally forgot about this one.

Anyway, i threw together some files and a quick tutorial.

1. Live demo here

2. Super quick video

3. Download the zip file with a starter .bloc and explanation

Cheers / Johny :fearful:

3 Likes

@Jakerlund
This looks very promising.
Just what many of us need.
Thanx a lot Johny, you’re always a great help.

1 Like

JMO… pop ups are annoying and a poor user experience. Why would you guys want to use them?

Pop are indeed annoying when they pop up unwanted.
But as a substitute for “read more” they’re great e.g…

Our phones at office was down for a day and we had to inform customers to contact us on an alternative number or by mail. We have a lot of support calls.
And such an alert box worked perfect for us that day.

But nonsense spam popups in general is :poop:
An the insanely annoying mouseleave alerts are the worst ones.

Agreed. . .

Hi @Jakerlund
I have 2 questions.
Where can I add a form?
How do I make it hidden until I click the button?

Thanks in advance,
Andy

Good question.

@apswoodwork @Bootsie

You can hide and unhide elements with a button click.
This is a very quick tutorial on revealing a form when clicking a button.
Is that what you were looking for?

Hide and unhide on click tutorial

Sorry Johny,
that’s a misunderstanding.
I know how to handle toggle visibility.
I meant preventing the pop up from showing automatically when the page loads.
I like to trigger the pop up only with the button.

Hi.
Your videos are a bit of a master class, thanks.
As @Bootsie siad. We like the idea of a form in a popup, but on button click with hidden by default.

Thank you,
Andy

Exactly.
Thanx Andy for backing me up :laughing:

The snippet I gave above includes a button, @mikeh added to it to use the blocs button.

Ho @teefers
That is the thing I am looking for, cheers.
I’ve added a form to my project.
I just need to know how do I colour the modal background?