[Resolved] Modal with map view

[Author]

Posts

[oriolc]

I am trying to insert a bootstrap modal with a map with multiple directions inside.
I use the example from Bootstrap but when I click the button it appears display:none.
Can you help me?

[oriolc]

You can see it in: hidden link. You can click Summary button.

[Minesh]

Hello. Thank you for contacting the Toolset support.

Well - first of all based on debug information you shared with us I can see that you are using outdated Views plugin version. Could you please make sure that you are using ALL Toolset plugins are updated to it's latest official released version.

*** Please make a FULL BACKUP of your database and website.***
You can download ALL latest Tooslet plugins from:
=> https://toolset.com/account/downloads/

We do not offer Bootstrap Modal yet but you can use it on your own:
=> https://toolset.com/documentation/user-guides/using-bootstrap-css-elements-content/

Are you able to display the Toolset map on standard WordPress page/post?

[oriolc]

Yes, the map can be seen in that page: hidden link

[Minesh]

Yes - I can see that the map is working on the page.

Could you please share information where you added Bootstrap modal with map and whats causing the issue. You may need to reinitialize the map. I need to check on your install why its not working.

Could you please setup a normal working modal popup and share information with me. I will try to add map with that normal pop-up.

*** Please make a FULL BACKUP of your database and website.***
I would also eventually need to request temporary access (WP-Admin and FTP) to your site. Preferably to a test site where the problem has been replicated if possible in order to be of better help and check if some configurations might need to be changed.

I would additionally need your permission to de- and re-activate Plugins and the Theme, and to change configurations on the site. This is also a reason the backup is really important. If you agree to this, please use the form fields I have enabled below to provide temporary access details (wp-admin and FTP).

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - could you please first try to integrate modal popup without views and check if that work and if that works could you please try to add bootstrap model hook:

jQuery('#myModal').on('shown.bs.modal', function (e) {
   WPViews.view_addon_maps.init_maps();
});

Where "#myModal" is the ID of your modal.

More info:
=> https://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstrap
=> https://stackoverflow.com/questions/11742839/showing-a-google-map-in-a-modal-created-with-twitter-bootstrap

[oriolc]

I tried but modal doesn't open.
Can you see what happens, please?

[Minesh]

Well - as I suspect this is your live site, I need test site where I can debug the issue further.

Could you please prepare a test site and check with minimum setup (Toolset plugins + Default theme) and try to implement the basic popup and then we will take next step to implement the map.

I have set the next reply to private which means only you and I have access to it.

[oriolc]

Can you help me, please?

[Minesh]

Could you please check with the following test page:
=> hidden link

What I've done is added a content template cell and within the content template cell I've added the modal popup HTML with view as given under:

<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal1">Open Modal</button>

<!-- Modal -->
<div id="myModal1" 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">&times;</button>
        <h4 class="modal-title">Modal Header</h4>
      </div>
      <div class="modal-body">
        [wpv-view name="mapa-eventos-2"]
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>

  </div>
</div>

Then, I've added following code to content template's CSS section:

.modal-dialog{
   position: absolute;
   left: 50%;
   /* now you must set a margin left under zero - value is a half width your window */
   margin-left: -312px;
   /* this same situation is with height - example */
   height: 500px;
   top: 50%;
   margin-top: -100px;
} 

Then, I've added following code to content template's JS section:

.
jQuery('#myModal1').on('shown.bs.modal', function (e) {
   WPViews.view_addon_maps.init_maps();
});

Now, I can see that map view is working within the bootstrap modal.

However, we change how layouts should be used as now layouts can be used to edit the content part. You can not edit header and footer using layouts now.

More details:
=> https://toolset.com/documentation/recommended-themes/toolset-divi-integration/

[oriolc]

Thanks,
But I want to show this in hidden link
When I tried to do it in the same way you do it in hidden link the popup won't open .
Do you know why?

[Minesh]

Well - I tried with all aspect but don't know whats causing the issue. This needs further debug and I need duplicator package of the site.

More info:
=> https://toolset.com/faq/provide-supporters-copy-site/

[oriolc]

Do you need that I send to you? Where I send it?

[Minesh]

Please send duplicator package. You can upload to some file sharing service and send me the link to download the duplicator package and installer.php file.

More info:
=> https://toolset.com/faq/provide-supporters-copy-site/

I have set the next reply to private which means only you and I have access to it.

[Minesh]

Well - It looks like there is some CSS or JS having the conflict on your page so I've used another approach to show the modal popup using the modal popup callback 'show'.

I've changed the following code in your content template:

<button type="button" onclick="callmodal()" class="btn btn-info btn-lg">Open Modal</button>

As you can see I'm calling the function "callmodal()" onclick event of the button and I've added following code to your content template cell's JS box:

function callmodal(){
    jQuery('#myModal1').modal('show');
}

Now, I can see that when I click on button "Open Modal" is shows the modal as rerquired.