Staff Bio Pop Up Box

[Rob Pearson]

Greetings, for the past few days i've been having trouble trying to add a "View Bio" button which would open a popup with that persons staff biography.
Currently i've got:

{{if \IPS\Member::loggedIn()->language()->checkKeyExists( "core_staff_directory_bio_{$user->id}" )}}
    <br>
    <div class='ipsType_richText ipsType_normal' data-ipsTruncate data-ipsTruncate-size="4 lines" data-ipsTruncate-type="hide">{lang="core_staff_directory_bio_{$user->id}"}</div>
{{endif}} 

Below is an image of how the message opens. We would like the Bio to do the same

https://i.gyazo.com/23ae919acd6e5c1c51078107496511f4.mp4

It gets the information for the users bio, but i have no idea on how to make it display in the middle of your screen via pop-up, kind of like the message module/button does, on the staff directory.

Any tips and help are greatly appreciated

[Jacques Corby-Tuech]

You're missing this piece of JS.

 

[Rob Pearson]

Hello @Jacques Corby-Tuech thank you for highlighting that.

When using the ips.ui.dialog i get this error

This is my code

          <a href='elementWithDialog' data-ipsDialog data-ipsDialog-url='elementWithDialog'>Launch dialog</a>
          
          
<div id='elementWithDialog' data-ipsDialog>
<!--PULL USER BIO --> {{if \IPS\Member::loggedIn()->language()->checkKeyExists( "core_staff_directory_bio_{$user->id}" )}}
    <br>
    <div class='ipsType_richText ipsType_normal' data-ipsTruncate data-ipsTruncate-size="4 lines" data-ipsTruncate-type="hide">{lang="core_staff_directory_bio_{$user->id}"}</div>
<!-- END USER BIO--> {{endif}} 
</div>

<script>
var dialog = ips.ui.dialog.getObj( $('#elementWithDialog') );         
          </script>

Thanks

[BomAle]

define a valid url instead text... http:// url='elementWithDialog'

[Rob Pearson]

@BomAle

Thank you for your advice. Could you please elaborate on your point.

How do i define a valid URL for it when all i want to do is pull the information from the staff directory.

[Rob Pearson]

We have been successful in creating the box but we have encountered a small problem

It does not display the correct information to match the staff members description. But instead they seem mixed up. How do we put a check in place or what script is required to ensure the correct description matches the staff member.

As you can see we clicked on Levi but is shows EpicFail's information. Any ideas?

[BomAle]

{{if \IPS\Member::loggedIn()->language()->checkKeyExists( "core_staff_directory_bio_{$user->id}" )}}
<a href='#' data-ipsDialog data-ipsDialog-content='#bio_{$user->id}'>View Bio</a>
<!--PULL USER BIO --> 
<div id='bio_{$user->id}' class='ipsHide ipsType_richText ipsType_normal' data-ipsTruncate data-ipsTruncate-size="4 lines" data-ipsTruncate-type="hide">{lang="core_staff_directory_bio_{$user->id}"}</div>
<!-- END USER BIO--> 
{{endif}} 

this should be correct @Rob Pearson

[Rob Pearson]

Thanks BomAle.

I appreciate you taking the time to find a solution to the problem i posted about. We have since completely redesigned and created a custom staff page. You can take a look if you like.

https://www.britishborders.co.uk/staff-team

Having the pop out box as an option, as you have created above, i'm sure would be a feature that many other communities/forums would like and benefit from.

Thanks once again

Rob