8 – Creating a route that returns an AJAX Response that opens a modal

​I have this route that is suppose to render a block and two view blocks and then display them in a modal.

Originally, I had this route created in the Pages section of Structure, but then decided to create it in my module using this tutorial

However, when I construct it in my module, now it won’t open in a modal. It attempts to, but then just fails with no errors in the console or in Drupal, so I can’t debug the issue because I can’t even find out what the issue is… If I go to the route directly in the browser instead of through a link, it just prints out an array of command objects

Here’s my code:

my_module.routing.yml

my_module.my.results:
  path: "/user/results"
  defaults:
    _title: "My Results"
    _controller: 'Drupalmy_moduleControllerme3Controller::myResults'
  requirements:
    _user_is_logged_in: "TRUE"
    _is_ajax_request: 'TRUE'

myController.php

class myController extends ControllerBase {
  function myResults() {
    $renderer = Drupal::service('renderer');

    $top_careers_view = views_embed_view('top_careers', 'block_top_careers');
    $top_careers = $renderer->render($top_careers_view);
    $matched_degrees_view = views_embed_view('matched_degrees', 'block_matched_degrees');
    $matched_degrees = $renderer->render($matched_degrees_view);

    $content = $top_careers . $matched_degrees;

    $title = "Title";
    $options = (
      'dialogClass' => 'my_modal'
    );
    $response = new AjaxResponse();
    $response->addCommand(new OpenModalDialogCommand($title, $content, $options));

    return $response;
  }
}

my-template.html.twig

<a 
  class="use-ajax"
  data-dialog-type="modal" 
  data-dialog-options='{
    "dialogClass": "my-modal"
  }'
  href="/{{ language }}/my/results">{{ 'Match More Careers'|t }}
</a>

At one point I had /my/results_test created in Pages that I would open up in a modal via the html link:

<a 
  class="ytp-magenta-button use-ajax"
  data-dialog-type="modal" 
  data-dialog-options='{
    "dialogClass": "ytp-dashboard-me3-modal"
  }'
  href="/{{ language }}/my/results_test">{{ 'Match More Careers'|t }}
</a>

I also had the /my/results route still created in my module and if I created a modal-link (defined above) to it from one of the blocks in /my/result_test, then the /my/results route would open in a modal as expected.

So essentially, with what I have, I can open my modal route from another modal, but I can’t open it directly from a regular page…

How to create appropriate user flow for multiple choice pop up modal windows belonging to side filter bar?

Given the system constrains and the user flow, the “Apply Filter” button could be within each pop-up filter window. So the user applies each category of filters before moving to the next.

enter image description here

Furthermore, it seems the popup has more levels of filters to it with a checkbox option to select all child filters under each. The levels and number of options might be too overwhelming for such a small popup. One alternative is using the real estate of the screen to showcase all options at once.

enter image description here

Lastly, this amount of filters needs some way of tracking and managing for the user. Consider something like filter tags.

enter image description here

How to create buttons in wordpress (Opening of popup in modal) and make sure the file is downloaded after the popup form is filled

I am new to wordpress and I need your help in placing the buttons for every post.(down under like Fee Enquiry
Get Free Counselling
)

Also I need your help(How to give prospectus to students after they click on download prospectus)

All you want to know about Chartered Accountant (CA) credential before getting started with the CA course

8 – Show node links in modal buttonpane

I want to show some node fields in buttonpane when I open node in modal.

As far as I know, it will automatically show there inputs with type submit and links with class button, but I added class button on email field link, anchor rendered is like:

<a href="mailto:test@example.com" class="button">Send email</a>

but it’s not showing in buttonpane.

Any idea why and how to fix it?

Is it advisable to use a dialogue modal to contain a complex form?

I have an application divided into list, edit and dashboard pages.
Each application entity has its own list and edit page.
Does it make sense to modify the application by going to the list page and modal dialogue which contains the modification form?
These forms can also be very complex.
More generally, does it make sense to use dialogue modals to create edit forms for an entity?
Can you list the reasons why yes or why not?

design – Best way to create a modal setup

I’m making an online food ordering platform similar to something like Uber Eats. I have the menu items stored in the database which are then sent to the front end where I use a templating language to build the menu and create the initial modals (which are all hidden obviously).

Once you click an item on the menu the respective modal opens up where you select the add-ons, write extra information, and change the quantity. Then, the user can add the item to the cart. The cart is a drop down shown on the menu page.

So here’s where I would like some advice. I want to have the ability such that when the user clicks on an item in the cart, the modal will show up for that item with all the selections made and instead of having just Add written on the bottom, it’ll say something like Update and Delete. If you haven’t used Uber Eats or anything similar, an example would be like the user adds 2 regular pizzas and also adds extra cheese. Then, when the user clicks on that pizza in their cart, it’ll open the modal for the regular pizza with extra cheese already checked and the quantity changed to two. What would be the easiest/most efficient way to do this?

8 – Show modal modal message on form success

I have a custom form that submits via AJAX. On form error, i simply return the whole form on my callback function, and the HTML is replaced, but i want it to open a modal dialog on success. What is the best way to do this? This is what i’m currently doing (i don’t like this solution because i can’t clear the form values, among other things):

    public function ajaxCallback(array &$form, FormStateInterface $form_state) {

        drupal_get_messages(); // Hide the status messages

        $form_state->setRebuild(TRUE);

        if ($errors = $form_state->getErrors()) {

          return $form;
        }
        else {

          $response = new AjaxResponse();

          $title = 'Consectetur adipiscing elit';
          $text  = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.';

          $response->addCommand(new OpenModalDialogCommand($title, $text));

          return $response;
        }
      }

php – Ajuda com Modal + Tabela

Boa tarde, estou lutando para melhorar uma página minha, onde gostaria de mostrar certas informações num modal, ao clicar num botão. O modal em si, está funcionando mas as informações não são mostradas dentro nele.

Eu fui acompanhando este tópico: https://stackoverflow.com/questions/37017276/how-to-open-modal-from-a-link-with-id


Essa é minha página (uma versão reduzida da original, para testes):

https://i.stack.imgur.com/ac3Fo.png

Ao clicar no botão de Detalhes, abre o Modal sem informações:

View post on imgur.com

E aqui é o que deveria mostrar dentro do Modal:

https://i.stack.imgur.com/sVnLw.png


Segue o código da minha página:

<?php

include_once("conexaoLocal.php");

$sql = "select armas.nome, armas.imagem, grade.imagem, substring(grade.imagem,14,2) switch, armas_ordem.ordenacao1 ";
$sql .= "from armas ";
$sql .= "inner join grade on armas.grade = grade.id ";
$sql .= "inner join armas_ordem on (armas.nome like armas_ordem.sub1 or armas.nome like armas_ordem.sub2 or armas.nome like armas_ordem.sub3 ";
$sql .= "or armas.nome like armas_ordem.sub4 or armas.nome like armas_ordem.sub5 or armas.nome like armas_ordem.sub6 or armas.nome like armas_ordem.sub7 ";
$sql .= "or armas.nome like armas_ordem.sub8) ";
$sql .= "where armas.tipo = 'AR' and armas_ordem.ordenacao2 = 1 and armas.nome = 'ACR' ";
$sql .= "order by armas_ordem.ordenacao1, armas.grade, armas.nome";

$consulta = mysqli_query($conexao,$sql);
$registros = mysqli_num_rows($consulta);

$print_inicio = "<section class='wrapper'><div class='inner'><div class='highlights'>";
$print_final = "</div></div></section>";

$count_acr_b3 = 0;
$print_acr_b3 = "";
$count_acr_t = 0;

?>

<!DOCTYPE HTML>
<html>
    <head>
        <title>Teste</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
        <meta name="description" content="" />
        <meta name="keywords" content="" />
        <link rel="stylesheet" href="assets/css/main.css?v=4.0" />
        <link rel="sortcut icon" href="https://i.servimg.com/u/f57/17/53/75/18/tutori13.png" type="image/x-icon" />
        <!-- Modal -->
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <!--     Global Site Tag (gtag.js) - Google Analytics     -->
        <script async src="https://www.googletagmanager.com/gtag/js?id=UA-32925328-1"></script>
        <script>
            window.dataLayer = window.dataLayer || ();
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
        
            gtag('config', 'UA-32925328-1');
        </script>
    </head>
    <body class="is-preload">
        <div class="container">        
            <center>
                <h2>Teste</h2>
                <?php
                while($exibirRegistros = mysqli_fetch_array($consulta)){
                    $nome = $exibirRegistros(0);
                    $imagem = $exibirRegistros(1);
                    $grade = $exibirRegistros(2);
                    $switch = $exibirRegistros(3);
                    $ordem = $exibirRegistros(4);
                    
                    $sql2 = "select armas.dano, armas.peso, armas.cadencia, armas.precisao, armas.recuo, armas.distancia, armas.municao, armas.total, armas.kdr, armas.loaded, armas.pre_silenciador, ";
                    $sql2 .= "armas.pre_scope, armas.pre_pente, armas.pre_balas, armas.pre_mira_ferro, armas.kfi, ";
                    $sql2 .= "ifnull(modo_disparo1.nome,'') nome_disparo1, ifnull(modo_disparo1.imagem,'') disparo_imagem1, ifnull(modo_disparo2.nome,'') nome_disparo2, ";
                    $sql2 .= "ifnull(modo_disparo2.imagem,'') disparo_imagem2, modo_disparo3.nome nome_disparo3, modo_disparo3.imagem disparo_imagem3, ";
                    $sql2 .= "patentes.nome nome_patente, patentes.abrev abrev_patente, patentes.imagem patente_imagem, ";
                    $sql2 .= "popularidade.nome popularidade, mods_silenciador.imagem silenciador_imagem, mods_scope.imagem scope_imagem, mods_pente.imagem pente_imagem, ";
                    $sql2 .= "mods_balas.imagem balas_imagem, mods_mira_ferro.imagem mira_ferro_imagem, armas.descricao, ";
                    $sql2 .= "mods_outros_kdr.imagem imagem_kdr, mods_outros_loaded.imagem imagem_loaded, patentes.id id_restricao, armas.no_swing ";
                    $sql2 .= "from armas ";
                    $sql2 .= "inner join popularidade on popularidade.id = armas.popularidade ";
                    $sql2 .= "inner join grade on grade.id = armas.grade ";
                    $sql2 .= "inner join modo_disparo modo_disparo1 on modo_disparo1.abrev = armas.modo_disparo1 ";
                    $sql2 .= "left join modo_disparo modo_disparo2 on modo_disparo2.abrev = armas.modo_disparo2 ";
                    $sql2 .= "left join modo_disparo modo_disparo3 on modo_disparo3.abrev = armas.modo_disparo3 ";
                    $sql2 .= "inner join mods_silenciador on mods_silenciador.status = armas.pre_silenciador ";
                    $sql2 .= "inner join mods_scope on mods_scope.status = armas.pre_scope ";
                    $sql2 .= "inner join mods_pente on mods_pente.status = armas.pre_pente ";
                    $sql2 .= "inner join mods_balas on mods_balas.status = armas.pre_balas ";
                    $sql2 .= "inner join mods_mira_ferro on mods_mira_ferro.status = armas.pre_mira_ferro ";
                    $sql2 .= "left join patentes on patentes.id = armas.restricao ";
                    $sql2 .= "left join mods_outros mods_outros_kdr on mods_outros_kdr.status = armas.kdr and mods_outros_kdr.tipo = 'K' ";
                    $sql2 .= "left join mods_outros mods_outros_loaded on mods_outros_loaded.status = armas.loaded and mods_outros_loaded.tipo = 'L' ";
                    $sql2 .= "where armas.nome = '$nome'";
                    
                    $consulta2 = mysqli_query($conexao,$sql2);
                    $registros2 = mysqli_num_rows($consulta2);
                    
                    $print_pc = "<center><table width='95%'>";
                    $print_mob = "<center><table>";
                    
                    while($exibirRegistros2 = mysqli_fetch_array($consulta2)){
                        $dano = $exibirRegistros2(0);
                        $peso = $exibirRegistros2(1);
                        $peso_conv = round($exibirRegistros2(1)/2.2046,3);
                        $cadencia = $exibirRegistros2(2);
                        $precisao = $exibirRegistros2(3);
                        $recuo = $exibirRegistros2(4);
                        $alcance = number_format($exibirRegistros2(5),0,",",".");
                        $alcance_conv = number_format($exibirRegistros2(5)/3.2808,0,",",".");
                        $municao = $exibirRegistros2(6);
                        $total = $exibirRegistros2(7);
                        
                        $silenciador = $exibirRegistros2(10);
                        $scope = $exibirRegistros2(11);
                        $pente = $exibirRegistros2(12);
                        $balas = $exibirRegistros2(13);
                        $mira = $exibirRegistros2(14);
                        $kfi = $exibirRegistros2(15);

                        if($recuo == 0){
                            $recuo = "---";
                        }
                        if($municao == 0 && $total == 0){
                            $municao = "Infinita";
                            $total = "";
                        }else{
                            $municao .= " / ";
                        }

                        $cadencia_completa = "$cadencia (por minuto)";
                        $alcance_completo = "$alcance pés ($alcance_conv metros)";
                        
                        $recursos = "";
                        if($silenciador == 2){
                            $recursos .= "Silenciador";
                        }
                        if($scope == 2){
                            if($recursos == ""){
                                $recursos = "Scope";
                            }else{
                                $recursos .= "<br>Scope";
                            }
                        }
                        if($pente == 2){
                            $recursos .= "<br>Pente";
                        }
                        if($balas == 2){
                            $recursos .= "<br>Balas";
                        }
                        if($mira == 2){
                            $recursos .= "<br>Mira de Ferro";
                        }

                        $swing = $exibirRegistros2(35);

                        if($swing == 1){
                            $recursos .= "<br><a href='atributos.html'>Mirando 100%<br><sup><span style='color: orange'>clique aqui para entender</span></sup></a>";
                        }

                        $kdr = $exibirRegistros2(8);
                        $kdr_imagem = $exibirRegistros2(32);
                        $loaded = $exibirRegistros2(9);
                        $loaded_imagem = $exibirRegistros2(33);

                        if($kdr == 1){
                            $recursos .= "<br><img src='$kdr_imagem' />";
                        }
                        if($loaded == 1){
                            $recursos .= "<br><img src='$loaded_imagem' />";
                        }

                        if($recursos == ""){
                            $recursos .= "Nenhum";
                        }

                        $nome_disparo1 = $exibirRegistros2(16);
                        $img_disparo1 = $exibirRegistros2(17);
                        $nome_disparo2 = $exibirRegistros2(18);
                        $img_disparo2 = $exibirRegistros2(19);
                        $nome_disparo3 = $exibirRegistros2(20);
                        $img_disparo3 = $exibirRegistros2(21);

                        if($img_disparo1 == ""){
                            $modo_disparo = "$nome_disparo1";
                        }else{
                            $modo_disparo = "$nome_disparo1<br><img src='$img_disparo1' />";
                        }
                        if($nome_disparo2 <> ""){
                            if($img_disparo2 == ""){
                                $modo_disparo .= "<br>$nome_disparo2";
                            }else{
                                $modo_disparo .= "<br>$nome_disparo2<br><img src='$img_disparo2' />";
                            }
                        }
                        if($nome_disparo3 <> ""){
                            $modo_disparo .= "<br>$nome_disparo3<br><img src='$img_disparo3' />";
                        }

                        $nome_patente = $exibirRegistros2(22);
                        $abrev_patente = $exibirRegistros2(23);
                        $img_patente = $exibirRegistros2(24);
                        $id_restricao = $exibirRegistros2(34);

                        if($abrev_patente <> ""){
                            if($id_restricao < 62){
                                $restricao = "<img src='$img_patente' /> $abrev_patente<br>$nome_patente";
                            }else{
                                $restricao = "$nome_patente";
                            }
                        }else{
                            $restricao = "$nome_patente";
                        }

                        $popularidade = $exibirRegistros2(25);
                        $mods_silenciador = $exibirRegistros2(26);
                        $mods_scope = $exibirRegistros2(27);
                        $mods_pente = $exibirRegistros2(28);
                        $mods_balas = $exibirRegistros2(29);
                        $mods_mira_ferro = $exibirRegistros2(30);

                        $mods = "<img src='$mods_silenciador' /> ";
                        $mods .= "<img src='$mods_scope' /> ";
                        $mods .= "<img src='$mods_pente' /><br>";
                        $mods .= "<img src='$mods_balas' /> ";
                        $mods .= "<img src='$mods_mira_ferro' /> ";

                        $descricao = $exibirRegistros2(31);
                        
                        $print_pc .= "<tr><td colspan='7'><strong>$nome</strong></td></tr>";
                        $print_pc .= "<tr><td colspan='7'><img src='$imagem' /></td></tr>";
                        $print_pc .= "<tr><td colspan='7'>$descricao</td></tr>";
                        $print_pc .= "<tr><td><strong>Grade</strong></td><td><strong>Restrição</strong></td><td><strong>Popularidade</strong></td><td><strong>Modo de Disparo</strong></td><td><strong>Recursos</strong></td><td><strong>Modificações</strong></td><td><strong>KFI</strong></td></tr>";
                        $print_pc .= "<tr><td><img src='$grade' /></td><td>$restricao</td><td>$popularidade</td><td>$modo_disparo</td><td>$recursos</td><td>$mods</td><td><img src='$kfi' /></td></tr>";
                        $print_pc .= "<tr><td><strong>Dano</strong></td><td><strong>Peso</strong></td><td><strong>Cadência</strong></td><td><strong>Precisão</strong></td><td><strong>Recuo</strong></td><td><strong>Alcance</strong></td><td><strong>Munição</strong></td></tr>";
                        $print_pc .= "<tr><td>$dano</td><td>$peso lb ($peso_conv kg)</td><td>$cadencia_completa</td><td>$precisao</td><td>$recuo</td><td>$alcance_completo</td><td>$municao $total</td></tr>";
                        $print_pc .= "<tr><td colspan='7' bgcolor='#45B334'></td></tr>";

                        $print_mob .= "<tr><td colspan='2'><strong>$nome</strong></td></tr>";
                        $print_mob .= "<tr><td colspan='2'><img src='$imagem'/></td></tr>";
                        $print_mob .= "<tr><td colspan='2'>$descricao</td></tr>";
                        $print_mob .= "<tr><td><strong>Grade</strong></td><td><img src='$grade' /></td></tr>";
                        $print_mob .= "<tr><td><strong>Restrição</strong></td><td>$restricao</td></tr>";
                        $print_mob .= "<tr><td><strong>Popularidade</strong></td><td>$popularidade</td></tr>";
                        $print_mob .= "<tr><td><strong>Modo de Disparo</strong></td><td>$modo_disparo</td></tr>";
                        $print_mob .= "<tr><td><strong>Recursos</strong></td><td>$recursos</td></tr>";
                        $print_mob .= "<tr><td><strong>Modificações</strong></td><td>$mods</td></tr>";
                        $print_mob .= "<tr><td><strong>KFI</strong></td><td><img src='$kfi' /></td></tr>";
                        $print_mob .= "<tr><td><strong>Dano</strong></td><td>$dano</td></tr>";
                        $print_mob .= "<tr><td><strong>Peso</strong></td><td>$peso lb ($peso_conv kg)</td></tr>";
                        $print_mob .= "<tr><td><strong>Cadência de Tiro</strong></td><td>$cadencia_completa</td></tr>";
                        $print_mob .= "<tr><td><strong>Precisão</strong></td><td>$precisao</td></tr>";
                        $print_mob .= "<tr><td><strong>Recuo</strong></td><td>$recuo</td></tr>";
                        $print_mob .= "<tr><td><strong>Alcance</strong></td><td>$alcance_completo</td></tr>";
                        $print_mob .= "<tr><td><strong>Munição</strong></td><td>$municao $total</td></tr>";
                        $print_mob .= "<tr><td colspan='2' bgcolor='#45B334'></td></tr>";
                    }
                    
                    $count_acr_b3 .= +1;
                    $print_acr_b3 .= "<section><div class='content'><header>";
                    $print_acr_b3 .= "<img src='$grade' /><br>$nome<br><img src='$imagem' /><br><br>";
                    $print_acr_b3 .= "<button type='submit' class='btn btn-default' data-toggle='modal' data-target='#myModal' value='$detalhes'><span class='glyphicon glyphicon-envelope'></span>Detalhes</button>";
                    $print_acr_b3 .= "</header></div></section>";
                    
                    $count_acr_t = $count_acr_b3;
                    $print_aux = ($count_acr_b3 > 0 ? "{$print_acr_b3}" : "");
                    $print_acr = "{$print_inicio} {$print_aux} {$print_final}";
                }
                
                $print_pc .= "</table></center>";
                $print_mob .= "</table></center>";

                $iphone = strpos($_SERVER('HTTP_USER_AGENT'),"iPhone");
                $ipad = strpos($_SERVER('HTTP_USER_AGENT'),"iPad");
                $android = strpos($_SERVER('HTTP_USER_AGENT'),"Android");
                $palmpre = strpos($_SERVER('HTTP_USER_AGENT'),"webOS");
                $berry = strpos($_SERVER('HTTP_USER_AGENT'),"BlackBerry");
                $ipod = strpos($_SERVER('HTTP_USER_AGENT'),"iPod");
                $symbian =  strpos($_SERVER('HTTP_USER_AGENT'),"Symbian");

                if ($iphone || $ipad || $android || $palmpre || $ipod || $berry || $symbian == true) {
                    $detalhes = $print_mob;
                }else{
                    $detalhes = $print_pc;
                }
                
                print "<button class='collapsible'><center><strong>Família Adaptive Combat Rifle (ACR)</strong></center></button><div class='content' style='display: none'>$print_acr</div>";
                
                print "<br><br>";
                
                print $detalhes;

                mysqli_close($conexao);
                ?>
            </center>

            <!-- Modal -->
            <div class="modal fade" id="myModal" 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"><strong>Detalhes</strong></h4>
                        </div>
                        <div class="modal-body">
                            <input type="text" id="valueof">
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">Fechar</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <script type="text/javascript">$('#prab').click(function(e){
        // alert($(e.target).val());
        document.getElementById("valueof").value = $(e.target).val();})
        </script>

        <!-- Scripts -->
        <script src="assets/js/jquery.min.js"></script>
        <script src="assets/js/browser.min.js"></script>
        <script src="assets/js/breakpoints.min.js"></script>
        <script src="assets/js/util.js"></script>
        <script src="assets/js/main.js"></script>
        <script src="assets/js/abas.js"></script>
        <script src="assets/js/collapse.js"></script>
    </body>
</html>

usability – What is better: to have a modal open instantly and then load its contents, or to load its contents and then open it?

The first option… but with more feedback.

You should have the modal appear immediately. This is important so that the user knows that their action has been successful (i.e. you don’t want them to keep clicking because they think nothing is happening).

However, having a blank modal is not good. Because the user will be confused as to why it is empty (even if this is a brief duration). What you should do is initially show some sort of loading/progress indicator. This is important so that the user knows the application is still working and to expect the results shortly (once they have loaded).

As the GET request is (usually) quite short, you don’t want to make this loading indicator too “in your face”. However, it should be clear enough that it is also suitable for those rare occasions where that GET request takes longer than expected.


Additional note, it might be worth making the loading indicator static if it’s only going to be visible for a short time.

Perhaps even just a simple bit of text: “Loading…” or “Fetching data…”.

Have a play around and see what works best with your test data.

javascript – Bootstrap Modal use from other Component in React

This is MapContainer.js

import React, { useEffect, useState } from 'react';
import { GoogleMap, LoadScript, Marker} from '@react-google-maps/api';


const MapContainer = () => {

    const ( currentPosition, setCurrentPosition ) = useState({});
  
    const success = position => {
      const currentPosition = {
        lat: position.coords.latitude,
        lng: position.coords.longitude
      }
      setCurrentPosition(currentPosition);
    };
    
    useEffect (() => {
      navigator.geolocation.getCurrentPosition(success);
    })

    const mapStyles = {        
        height: "100vh",
        width: "100%"};
 
  
  return (
     <LoadScript googleMapsApiKey='AIzaSyA40-c3DnhRdFQ5In8xPdTgQSUne1UFhZI'>
       <GoogleMap mapContainerStyle={mapStyles} zoom={13} center={currentPosition}>
          {    
          currentPosition.lat &&
            ( 
              <Marker onClick={""} position={currentPosition}/> 
            )          
          } 
        </GoogleMap>
        
     </LoadScript>
  )
}

export default MapContainer;

And This is ModalBootstrap.js

import { render } from '@testing-library/react';
import React, { useState } from 'react';
import { Modal, Button } from 'react-bootstrap';
import MapContainer from '../MapContainer/MapContainer';


function Example() {
    const (show, setShow) = useState (false);
  
    const handleClose = () => setShow(false);
    const handleShow = () => setShow(true);
  
    return (
      <>
        <Button variant="primary" onClick={handleShow}>
          Launch demo modal
        </Button>
  
        <Modal show={show} onHide={handleClose}>
          <Modal.Header closeButton>
            <Modal.Title>Modal heading</Modal.Title>
          </Modal.Header>
          <Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
          <Modal.Footer>
            <Button variant="secondary" onClick={handleClose}>
              Close
            </Button>
            <Button variant="primary" onClick={handleClose}>
              Save Changes
            </Button>
          </Modal.Footer>
        </Modal>
      </>
    );
  }
  
  render (<Example />);

  export default Example;

I want to show the ‘Modal’ when I click on the Marker (in MapContainer.js).I also want to pass the value of latitude and longitude from MapContainer.js to ModalBootstrap.js. I want to pass those datas when I click on the Marker. When I click on the Marker a modal will be pop up and it will show the current latitude and longitude of the location. I’ve implemented the google map successfully. But couldn’t pass the value to the ModalBootStrap.js and show the Modal when I click the Marker. How can I do this?