Question

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相邻显示模型（我创建的模型很小）。

Answer 1

我们具有以下HTML结构
<div>
  <button id="btn">Open Modal</button>
  <div class="red block">
  </div>
  <div class="blue block">     
  </div>  
</div>
现在我们要做的是在蓝色内打开一个引导程序模态   单击一个按钮即可。

因此，请按照以下步骤操作：-
在蓝色div内为引导程序模式编写HTML代码。

    开放模式
    
    <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>
编写以下JavaScript代码

$（document）.ready（function（）{
 $("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","");     
  });
}）;
为此编写以下CSS

。红色   {     背景颜色：红色；   }

。蓝色   {     背景颜色：蓝色；     position：relative; //以便.modal和.modal-backdrop相对于它定位   }

.block   {     宽度：100％;     高度：200px；   }

.modal，.modal-backdrop {       位置：绝对重要！   }



就是这样

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

如何在特定div元素或任何其他元素附近显示引导模态？

1 个答案: