Skip Navigation

[Resolved] Display content in a popup

This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.

Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.

This topic contains 8 replies, has 2 voices.

Last updated by gaborG 6 years ago.

Assigned support staff: Beda.

Author
Posts
#332282

I am trying to display part of the content on a popup, as a result of clicking a button.
I don't know how to do this in Views or Layouts. I saw an earlier post where someone advised to use a Lightbox plugin, but I don't know how to add non-photo content to a lightbox.
I want to display a CRED form in the popup.
Any ideas how would it be best? Thanks.

#332292

I looked up how Bootstrap deals with popups, they have 3 solutions built in: the modal, the tooltip and the popover. Either solution would be fine for me. Actually the ones that appear in small next to the cursor would be more practical in my opinion. But I would have to be able to place a CRED form in it.
I tried it with the modal, it just displays the code of the form, not the actual form itself. Something was clearly not right.

#332581

Thank you for contacting us here in the Support Forum 🙂

Here the code:

<wpv-loop>
<div class="container">

  <h2>Modal Example</h2>

  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#[wpv-post-id]">Open Modal</button>

  <div class="modal fade" id="[wpv-post-id]" role="dialog">

    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">

          <button type="button" class="close" data-dismiss="modal">&times;</button>

          <h4 class="modal-title">Modal Header</h4>

        </div>

        <div class="modal-body">
          [cred_form form="37" form_name="Post Upload"]
        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>

      </div> 
    </div>
  </div>
  
</div>

</wpv-loop>

It should work out of the Box in a View, of course you need to change your CRED ShortCode.

That's a Modal:
hidden link
(mine above is slightly different, it might need some adoption)

Of course this all does only work with BootsTrap Framework but I recall you have Toolset Bootstrap Theme running, if I'm right?

Please let me know if you have further questions regarding the issue mentioned in this Thread

Thank you for your patience.

#332593

For me this doesn't work the way I wanted.
What I see from this code is that it opens the Edit button in the modal but still navigates to another page to display the Edit CRED form.

I edited the code to display my stuff this way:

<wpv-loop>
    <div class="container">
      <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#[wpv-post-id]">[wpv-post-title]</button>

      <div class="modal fade" id="[wpv-post-id]" role="dialog">

        <div class="modal-dialog">
          <div class="modal-content">
            <div class="modal-header">

              <button type="button" class="close" data-dismiss="modal">&times;</button>

              <h4 class="modal-title">Edit [wpv-post-title]</h4>

            </div>

            <div class="modal-body">
              [cred_link_form form="1705" form_name="Edit content - Artists"]
            </div>

            <div class="modal-footer">
              <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>

          </div> 
        </div>
      </div>

    </div>

    </wpv-loop>

And of course I assigned this to the view that displays artists. But the modal body remains empty. All I can display there is an Edit link, that would still open a new page to display the CRED form.

#332612
Bildschirmfoto 2015-09-10 um 16.59.49.png

Thanks for the Details

You actually insert a link CRED form, and not the form itself

You need to include the form itself.

This can be chosen when you include the Form with the Wizard.

It will NOT work for "Create Child Form Links" as I elaborated in your other thread.

Please don't hesitate to inform me in case the issue persists

Thank you for your patience.

#332620

Right!
Thanks!
It works now 🙂

Is there a way to place the form's Save button in the modal's footer, so that saving the form and closing the modal would be done with the same button?

#332631

If you use default Modal (not a JS Submitted CRED Form 🙂 ), the modal is removed anyway after you hit submit in the included CRED, correct?

So you can just remove the Modal's close Button, or even the entire footer, if you really do not need it.

Keep in mind, this might be useful for users to close the modal in case they do not want to submit the Form but just close it.

Anyway the default Modal also has the "close" "X" at the modal's top left, so it would not matter.

Adding the CRED Submit Button only instead of the Close button is not possible, CRED forms are a "standalone" short code, you can not divide form from button

Theoretically you could tr something, I never though of it but might be possible:

Instead of using the Bootstrap Modal in the View, you could use it in the CRED form Code Editor.

There, the CRED's short codes and fields are still separated.
(so you could as example use the CRED short code for the submit button instead the Modal Close Button)

So you could wrap those CRED Fields with the Modal HTML

Not sure it works though, I've never tried it, and requires some tests.

Please let me know if you have further questions regarding the issue mentioned in this Thread

Thank you for your patience.

#332639

That is a freaking good idea Beda, to build the modal into the form itself!
I made it, the modal is in the cred form and all I need to place in the layout is a button, with the label being given by the cred form shortcode.

<div class="btn-group-vertical">
   <wpv-loop>
      <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#[wpv-post-id]">[cred_form form="1705" form_name="Edit content - Artists"]</button>
   </wpv-loop>
</div>

This makes the view's code a whole lot more clear.
The only thing that is not right is that the button for some reason looks blue, like the button on your first code what you placed here earlier, and I can't seem to change it. But that is irrelevant for this topic.

So thank you for your amazing support and your ideas Beda!

#332641

Actually I was stupid, I didn't need the button html for the view, it was already in the CRED form too.