I have this code that shows a button. When clicked on, a bootstrap modal opens with the cred form in it. How do I change this code so that the form is ONLY LOADED in the popup when I click the button? Right now, when I view the page that button is on, I can also see in the html it is loading the form too. It's obviously hidden, but still loading it.
[code]<button type="button" class="button snippets" data-toggle="modal" data-target="#[wpv-post-id]">
[wpv-post-body view_template='None']
<div class="modal fade" id="[wpv-post-id]" role="dialog">
<div class="modal-dialog snippet">
<div class="modal-content">
<div class="modal-body">
[cred_form form="1007" form_name="Edit Snippet"]
</div>
</div>
</div>
</div>[/code]
That is how modals work.
The HTML is there, it's just not shown because it is only visible in the Modal HTML.
What you could do, but we can not provide support for this since it's not a Toolset feature, is to load the Modal's content with AJAX.
But this is complex, it requires Custom Scripts and we can not help with those.
Also, some features are tricky when used with AJAX (related to CRED Forms).
As example CRED delete Buttons might conflict with AJAX calls.
I would reccomend to keep the native feature of Modals as they come out-of-the-box.