的CSS

Question

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

我看到一个链接http://refork.com/x657，但是当我尝试它时，它并没有为我工作。对话框拒绝打开

非常感谢。

Answer 1

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

html：

<button id="myBtn">show 'modal' alert</button>

<p>
  more content that the user should be able to see....
</p>
<p>
  more content that the user should be able to see....
</p>
<p>
  this is the bottom
</p>

<div style="position:fixed;bottom:0;left:0;width:100%;" id="alerts"></div>

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

$("#myBtn").click(function() {
    $('<div class="alert alert-success alert-dismissable">'+
            '<button type="button" class="close" ' + 
                    'data-dismiss="alert" aria-hidden="true">' + 
                '&times;' + 
            '</button>' + 
            'modal info...' + 
         '</div>').appendTo("#alerts");
});

Answer 2

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

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

以示例：

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

Answer 3

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

Answer 4

Bootstrap 3提供了一个名为背景的参数，当设置为静态时，会阻止对话框在外部点击时关闭。

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

Answer 5

我解决了这个问题：

我创建了一个没有＆＃34;模态＆＃34;的模态对话框。容器：

<div class="modal-dialog" id="popup_tool_mouseposition" data-backdrop="false" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
                <span>&times;</span>
            </button>
            <h4 class="modal-title" data-i18n="tool.mouseposition.title"></h4>
        </div>
        <div class="modal-body">HUHU</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal" data-i18n="com.close"></button>
        </div>
    </div>
</div>

现在我像那样称呼它......此刻非常残忍......我以后会解决这个问题

$("#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

<?php 
// 404 for search engines 
header("HTTP/1.1 404 Not Found"); 
?>
<!-- HTML for people -->

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');
});

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

7 个答案:

的CSS

JS