如何创建非模态引导程序对话框

我正在尝试创建一个非模态引导程序对话框。 我只是不知道该怎么做。 我查了很多post，但没有人回答我的问题。 我需要对话框是非模态的，因为我希望用户即使打开对话框也可以做其他事情。

我看到一个链接http://refork.com/x657，但是当我尝试它时，对我来说不起作用。 该对话框拒绝开启

非常感谢。

Answer 1

根据文档，这似乎不可能 – 但是警报可能会满足您的目的： http ：//getbootstrap.com/javascript/#alerts可以将警报放入具有固定位置的div中，以使它们保持可见且独立他们下面的内容。

小提琴

html：

show 'modal' alert 
 more content that the user should be able to see.... 
 
 more content that the user should be able to see.... 
 
 this is the bottom 
 
 

和JS添加’模态’警报（你可以随意设置样式）：

 $("#myBtn").click(function() { $('
'+ '' + '×' + '' + 'modal info...' + '
').appendTo("#alerts"); }); 

Answer 2

只需在显示模态后执行以下行

 $(document).off('focusin.bs.modal'); 

例如：

 $("#my-modal").on('shown.bs.modal',function(){ $(document).off('focusin.bs.modal'); }); 

Answer 3

您希望用户即使打开对话框也可以执行其他操作，尝试检查该对话框中的元素。您会注意到在此对话框div之前正在应用类“模态背景”的div。 由于此类只有主体内容似乎冻结，您将无法单击文档正文中的任何其他位置。删除此类并让用户单击任意位置并在DOM元素中执行任何操作。

Answer 4

Bootstrap 3提供了一个名为backdrop的参数，当设置为static时，防止对话框在外部单击时关闭。

 $('#myModal').modal({ backdrop: 'static' }) 

Answer 5

我这样解决了：

我创建了一个没有“模态”容器的modal dialog：

 
 
 
  ×  
 
 
HUHU
 
  
 
  

现在我像那样称呼它……在这一刻非常残忍……我稍后会解决这个问题

 $("#popup_tool_mouseposition").show(); $("#popup_tool_mouseposition").draggable({ handle : ".modal-header" }); $("#popup_tool_mouseposition").width(300); $("#popup_tool_mouseposition").css('position', 'fixed'); $("#popup_tool_mouseposition").css('top', '0'); $("#popup_tool_mouseposition").css('left', '0'); 

draggable（）来自jqueryUI

Answer 6

  .modal-backdrop{ display:none !important; } 

Answer 7

CSS

 // hide backdrop overlay: .modal-backdrop { display: none !important; } // allow scroll .modal, .modal-open { overflow-y: auto; padding-right: 0 !important; } // place popup in the center, allow interaction with page under popup .modal { top: 50%; right: auto; bottom: auto; left: 50%; transform: translate(-50%,-50%); } .modal-dialog { margin: 0 !important; } // change animation .modal.fade .modal-dialog { transform: scale(.1, .1); } .modal.in .modal-dialog { transform: scale(1, 1); } 

JS

 // save focus and scroll position on popup close (otherwise button that triggered popup will take focus) $(document).on('click.bs.modal.data-api', '[data-toggle="modal"]', function (e) { var $this = $(this); var href = $this.attr('href'); var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))); // strip for ie7 $target.off('hidden.bs.modal'); }); // allow interaction with page under popup $('.modal').on('shown.bs.modal', function(){ $(document).off('focusin.bs.modal'); });