[Resolved] Bootstrap Modal not staying open

[Author]

Posts

[Charles]

Support,

I am trying to implement a modal into my content template. Upon inserting the code and clicking the modal button, the modal quickly shows then disappears. I'm not sure what the conflict is.

Page with modal (at bottom of page): hidden link
Modal code used: hidden link

Thanks,
Chuck

[Charles]

I have also tried this plugin, which is essentially the same code just in plugin format with controllable CSS: https://wordpress.org/plugins/bootstrap-modals/

If we could get the plugin working that would be better as changing CSS would be easier.

[Christian Cox]

Hi, you shouldn't need any additional Bootstrap Modal plugin because Toolset loads Bootstrap automatically based on your settings in Toolset > Settings > General. Bootstrap Modals work without any additional plugins, you just have to add the markup. Please deactivate the bootstrap modals plugin, and try again.

[Charles]

Chrisitian,

The plugin is not active. On this page (hidden link) I am using this code:

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- 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">
        <p>Some text in the modal.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

The modal only opens for a split second then closes.

Thanks,
Chuck

[Christian Cox]

Take a look at the source of this page. I'm attaching a screenshot. For some reason, the bootstrap modal plugin's assets are still loading on the page. Any idea why that would be happening?

[Charles]

Christian,

I got this to work properly. Not sure what was going on.

On this page there's a prompt with a button to "contact seller": hidden link

The prompts code is as follows:

[x_raw_content ][prompt type="left" title="Asking Price" message=[types field='price'][/types] button_text="Contact Seller" href="<em><u>hidden link</u></em>"]

This is the modal code I am trying to insert into the prompt:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Contact Seller</button>

<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
  <div class="modal-dialog">

    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Contact Seller</h4>
      </div>
      <div class="modal-body">
         [cred_form form='contact-seller-form']
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

The element breaks down when I take out:

button_text="Contact Seller" href="<em><u>hidden link</u></em>"

and insert the modal code.

Are you able to identify what I'm doing wrong? The modal and cred form works great when it's standing alone. I was actually surprised to see the messages go through first try.

Thanks,
Chuck

[Christian Cox]

I'm not familiar with the prompt shortcode, but it's possible you can't use anything but plain text. I think it's a Cornerstone element, so your best bet is to ask their support team if the prompt shortcode will accept HTML text that contains other shortcodes, or if you must recreate this element somehow without using the prompt shortcode.

[Charles]

Got it. I'll reach out to them.

Thanks,
Chuck

[Charles]

Got it working!

hidden link

How can I add conditions?
If user logged in modal pops up and shows the CRED form.
If user not logged in they're diverted to login page then back to post

Thanks,
Chuck

[Christian Cox]

I would use conditional HTML and two prompt shortcodes. One prompt includes the modal trigger and the other contains a link to the login form. The conditional HTML will test whether or not a user is logged in by accessing the User ID. If the User ID is set, your user is logged in. If not, they are not logged in.
User information shortcode reference:
https://toolset.com/documentation/user-guides/views-shortcodes/#wpv-user
Conditional HTML reference:
https://toolset.com/documentation/user-guides/conditional-html-output-in-views/

If you need more details, please open a new ticket so we can address this as a separate issue. Thanks!

[Charles]

This worked.

Good look,

Chuck