Как отобразить модальный бутстрап рядом с конкретным элементом div или любым другим элементом.? - PullRequest
Новая
       14

Как отобразить модальный бутстрап рядом с конкретным элементом div или любым другим элементом.?

1 голос
/ 23 апреля 2019 
I have three or four div  or u l, l i /l i l i /l i /u l(u l=u+l and l i=l+i tags), If i mouse over on a particular div or u l or l i then it should display the modal(consist of edit and delete options) adjacent to that particular div u l or l i tags.

Я пытался Показывать модальное после наведения мыши, но модальное появляется в правой верхней части страницы.

// Код для Модели 

<div class="modal fade col-sm-3" id="myModal" role="dialog" data-backdrop="">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body" data-toggle="dropdown" aria-expanded="false">
                <a href="javascript:;" onclick="" title=""><i class="fa fa-trash-o"></i> Remove</a>
                <a href="javascript:;" onclick="" title=""><i class="fa fa-trash-o"></i>Change Permissions</a>
                <a href="javascript:;" onclick="" title=""><i class="fa fa-cog text-muted"></i> Settings</a>
            </div>
        </div>
    </div>
</div>

//Код JQuery 

$("#pwidcontainer").on("mouseenter", "li", function () { //Main outer Container consist li element

            $('#myModal').modal('toggle');

            $(".div_pw").addClass("after_modal_appended"); // one of the li of that main container

            $(".modal-backdrop").appendTo(".div_pw");  //to append model adjucent to the li where we can make edit/delete         
        });

При наведении курсора мыши на любой div_pw должна отображаться модель (малая, которую я создал) рядом с этим конкретным div.

1 Ответ

0 голосов
/ 23 апреля 2019

У нас есть следующая структура HTML 

<div>
  <button id="btn">Open Modal</button>
  <div class="red block">
  </div>
  <div class="blue block">     
  </div>  
</div>

Теперь нам нужно открыть модальный бутстрап внутри синего div нажатием кнопки.

Для этого выполните следующие действия: -

  1. Напишите HTML-код для модальной начальной загрузки внутри синего div.

    Открыть модал 

        <!-- 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">
        <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>

  2. Введите следующий код Javascript

    $ (документ) .ready (функция () {

     $("body").on("click","#btn",function(){

      $("#myModal").modal("show");

      //appending modal background inside the blue div
      $('.modal-backdrop').appendTo('.blue');   

      //remove the padding right and modal-open class from the body tag which bootstrap adds when a modal is shown
      $('body').removeClass("modal-open")
      $('body').css("padding-right","");     
  });

    });

  3. Напишите для него следующий CSS

    .red { фон-цвет: красный; }

    .blue { цвет фона: синий; position: относительный; // так что .modal & .modal-background позиционируется относительно него }

    .block { ширина: 100%; высота: 200px; }

    .modal, .modal-background { позиция: абсолютная! важная; }

  4. Вот и все

https://webkul.com/blog/how-to-display-a-bootstrap-modal-inside-a-div/

...