jquery bootstrap modal is not displayed in svg when underload



  • There are two fashion windows on bootstrap 4 for different purposes. They have a svg code from different sources. Sources give such a code:

    ...
    echo json_encode([
            'title'=>$th1->MainNode->title,
            'html'=>$html
        ]);
    

    The button code is like:

    function edit_thanka(tid)
            {
                $.ajax({
                    type: 'GET',
                    url:'ajax/thanka/edit.php?id='+tid+"&t="+Math.random(),
                    processData: false, 
                    contentType: false, 
                    success: function(res) {
                        $('#edit_th_body').html(res.html);
                        $('#edit_th_header').html("Редактирование тханки "+res.title);
                        $('#edit_th_body .th_item').on('click', clicknode_ev);
                        $('#modalEditThanka').modal('show');
                    },
                    error: function (error) {
                        //$('#resdiv').html(returnval);
                        console.log('error; ' + eval(error));
                    } 
                });
            /*    $('#edit_th_body').load('ajax/thanka/edit.php?id='+tid, function(responseText,textStatus, xhr) {
                    $('#edit_th_body .th_item').on('click', clicknode_ev);
                    $('#modalEditThanka').modal('show');
                });*/
            }
    

    Every fashion window is different. It works. But at some point, the editing windows are overwhelmed with pictures inside svg partially or completely.

    We were able to model this gluc in a vacuum:

    <html>
      <head>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
    
    &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"&gt;&lt;/script&gt;    
    

    </head>
    <body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Modal1
    </button>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal2">
    Modal2
    </button>

        &lt;!-- Modal 1 --&gt;
        &lt;div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Modal 1&lt;/h5&gt;
                &lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
    

    <svg>
    <pattern id="pattern" width="100%" height="100%">
    <image xlink:href="https://img-fotki.yandex.ru/get/10/yoksel.4e/0_398a6_1f246823_M" width="300" height="200" />
    </pattern>
    <polygon fill="url(#pattern)" stroke="turquoise" stroke-width="4" points="85,0 170,61 137,161 32,161 0,61" transform="translate(65,20)" />
    </svg>

              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                &lt;button type="button" class="btn btn-secondary" data-bs-dismiss="modal"&gt;Close&lt;/button&gt;
                &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;!-- Modal 2 --&gt;
        &lt;div class="modal fade" id="exampleModal2" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true"&gt;
          &lt;div class="modal-dialog"&gt;
            &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                &lt;h5 class="modal-title" id="exampleModalLabel"&gt;Modal 2&lt;/h5&gt;
                &lt;button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"&gt;&lt;/button&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
    

    <svg>
    <pattern id="pattern" width="100%" height="100%">
    <image xlink:href="https://img-fotki.yandex.ru/get/10/yoksel.4e/0_398a6_1f246823_M" width="300" height="200" />
    </pattern>
    <polygon fill="url(#pattern)" stroke="turquoise" stroke-width="4" points="85,0 170,61 137,161 32,161 0,61" transform="translate(65,20)" />
    </svg>

              &lt;/div&gt;
              &lt;div class="modal-footer"&gt;
                &lt;button type="button" class="btn btn-secondary" data-bs-dismiss="modal"&gt;Close&lt;/button&gt;
                &lt;button type="button" class="btn btn-primary"&gt;Save changes&lt;/button&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
    

    </body>
    </html>



  • It turns out that the system of these patters and their aidelics is all over the page page, and then we need to make different aideons for different branches.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2