欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

背景下出現(xiàn)的自舉模型

CSS
錢多多1年前9瀏覽0評論

我使用了直接來自Bootstrap示例的模態(tài)代碼，并且只包含了bootstrap.js(而不是bootstrap-modal.js)。然而，我的模態(tài)出現(xiàn)在灰色背景下，不可編輯。

它看起來是這樣的:

modal hiding behind backdrop

看到這個小提琴的一種方法來重現(xiàn)這個問題。代碼的基本結(jié)構(gòu)是這樣的:

<body>
    <p>Lorem ipsum dolor sit amet.</p>    

    <div class="my-module">
        This container contains the modal code.
        <div class="modal fade">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">Modal</div>
                </div>
            </div>
        </div>
    </div>
</body>

body {
    padding-top: 50px;
}

.my-module {
    position: fixed;
    top: 0;
    left: 0;
}

知道這是為什么嗎，或者我能做些什么來解決這個問題？

如果模式容器具有固定或相對位置，或者在具有固定或相對位置的元素中，就會發(fā)生這種行為。

確保模式容器及其所有父元素以默認(rèn)方式定位，以解決問題。

這里有幾種方法可以做到這一點(diǎn):

最簡單的方法是移動模態(tài)div，使其位于任何具有特殊定位的元素之外。一個很好的地方可能就在結(jié)束body標(biāo)記之前& lt/body & gt；。 或者，您可以從模態(tài)及其祖先中刪除position: CSS屬性，直到問題消失。然而，這可能會改變頁面的外觀和功能。 這個問題與父容器的定位有關(guān)。在顯示之前，您可以很容易地將您的模型從這些容器中“移”出來。如果你使用js來展示你的模態(tài)，下面是如何做的:

$('#myModal').appendTo("body").modal('show');

或者，如果使用按鈕啟動模式，請將。模態(tài)(' show ')；只要做:

$('#myModal').appendTo("body")

這將保持所有正常的功能，允許您使用按鈕顯示模態(tài)。

我嘗試了上面提供的所有選項，但沒有得到它使用這些工作。

有效的方法:設(shè)置。模態(tài)背景to -1。

.modal-backdrop {
  z-index: -1;
}

此外，確保引導(dǎo)css和js版本是相同的。不同的版本也可以使modal出現(xiàn)在背景下:

例如:

不好:

<link  rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>

好:

<link  rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

我也遇到過這個問題，沒有一個解決方案對我有效，直到我發(fā)現(xiàn)我實際上不需要背景。您可以使用下面的代碼輕松刪除背景。

<div class="modal fade" id="createModal" data-backdrop="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Create Project</h4>
            </div>
            <div class="modal-body">Not yet made</div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

注意:data-background屬性需要設(shè)置為false(其他選項:static或true)。

我通過在打開模式窗口后給它一個高的z索引值來讓它工作。例如:

$("#myModal").modal("show");
$("#myModal").css("z-index", "1500");

@Muhd提供的解決方案是最好的方法。但是如果你被困在一個改變頁面結(jié)構(gòu)不可行的情況下，使用這個技巧:

<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop="false" style="background-color: rgba(0, 0, 0, 0.5);">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"
                aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
        <div class="modal-body">...</div>
        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Save changes</button>
        </div>
    </div>
</div>

這里的訣竅是data-background = " false " style = " background-color:rgba(0，0，0，0，0.5)；"通過移除默認(rèn)背景，創(chuàng)建一個虛擬的背景，用一些阿爾法設(shè)置對話框本身的背景顏色。

更新1: 正如@Gustyn指出的那樣，點(diǎn)擊背景不會像預(yù)期的那樣關(guān)閉對話框。因此，要實現(xiàn)這一點(diǎn)，你必須添加一些java腳本代碼。這里有一些例子，你可以做到這一點(diǎn)。

$('.modal').click(function(event){
    $(event.target).modal('hide');
});

我找到的最簡單的解決方案，對我所有的情況都有效，是一個類似帖子中的答案:

這是:

.modal {
  background: rgba(0, 0, 0, 0.5); 
}
.modal-backdrop {
  display: none;
}

基本上不使用原來的背景。相反，你使用模態(tài)作為背景。其結(jié)果是，它的外觀和行為與原來的完全一樣。它避免了z-index的所有問題(對我來說，將z-index改為0解決了這個問題，但我的導(dǎo)航菜單在模態(tài)和背景之間產(chǎn)生了新的問題),而且很簡單。

感謝@Jevin O. Sewaruth發(fā)布了原始答案。

這將覆蓋所有模態(tài)，而不會弄亂任何動畫或預(yù)期行為..

$(document).on('show.bs.modal', '.modal', function () {
  $(this).appendTo('body');
});

但是這是一個通用的解決方案

var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

訪問此鏈接-自舉3 -模態(tài)消失在背景下時，使用固定側(cè)邊欄的細(xì)節(jié)。

只需添加兩行CSS:

.modal-backdrop{z-index: 1050;}
.modal{z-index: 1060;}

的。模態(tài)背景應(yīng)該有1050的值來設(shè)置它在導(dǎo)航條上。

另一種方法是從。這將導(dǎo)致背景和你身體的其他部分在同一個水平面上(它仍然會褪色),你的模態(tài)在上面。

。模態(tài)背景看起來像這樣

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: #000000;
}

我簡單地設(shè)置了:

#myModal {
    z-index: 1500;
}

它起作用了....

對于原問題:

.my-module {
    z-index: 1500;
}

在你的模態(tài)中使用這個:

data-backdrop="false"

當(dāng)在CSS中為背景甚至折疊標(biāo)題使用漸變時，經(jīng)常會遇到這個問題。

不幸的是，修改或覆蓋核心引導(dǎo)CSS是不可取的，并可能導(dǎo)致不必要的副作用。侵入性最小的方法是添加data-background = " false ",但是您可能會注意到淡入淡出效果不再像預(yù)期的那樣工作。

遵循最近發(fā)布的Bootstrap之后，3.3.5版似乎解決了這個問題，并且沒有不必要的副作用。

下載:https://github . com/twbs/bootstrap/releases/download/v 3 . 3 . 5/bootstrap-3 . 3 . 5-dist . zip

確保包含3.3.5中的CSS文件和JavaScript文件。

我有一個更輕更好的解決方案..

通過一些額外CSS樣式可以很容易地解決這個問題..

隱藏類。模態(tài)背景(由Bootstrap.js自動生成)

.modal-backdrop
{
display:none;
visibility:hidden; 
position:relative
}

設(shè)置…的背景。模式到半透明的黑色背景圖像。

.modal
{
background:url("http://bin.smwcentral.net/u/11361/BlackTransparentBackground.png")
// translucent image from google images 
z-index:1100; 
}

如果您需要模態(tài)位于元素內(nèi)部，而不是靠近& lt/body & gt；標(biāo)簽..

最簡單的解決方案是將模式對話框移出任何容器，并在& ltbody & gt元素:

<body>    
    <div>
        ...
    <div>
    
    
    <div class="modal">
        ... modal dialog here
    </div>
</body>

我試過這個解決方案，它對我很有效。

來源:https://weblog . west-wind . com/posts/2016/sep/14/bootstrap-modal-dialog-showing-under-modal-background

我通過向div添加data-background = " false "解決了我的問題:

<div class="modal fade" id="exampleModalCenter" data-backdrop="false" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">

.....

嗨，我有同樣的問題，然后我意識到，當(dāng)你使用bootsrap 3.1 與舊版本的bootsrap (2.3.2)不同 模態(tài)的html結(jié)構(gòu)被改變了！

你必須用模態(tài)對話框和模態(tài)內(nèi)容來包裝你的模態(tài)頁眉和頁腳

<div class="modal hide fade">

  <div class="modal-dialog">
    <div class="modal-content">

    **here goes the modal header body and footer**

    </div>
  </div>

 </div>

以上建議的解決方案都不適合我，但是這個技巧解決了這個問題:

$('#myModal').on('shown.bs.modal', function() {
   //To relate the z-index make sure backdrop and modal are siblings
   $(this).before($('.modal-backdrop'));
   //Now set z-index of modal greater than backdrop
   $(this).css("z-index", parseInt($('.modal-backdrop').css('z-index')) + 1);
});

我遇到了這個問題，最簡單的解決方法是在模態(tài)對話框div上添加大于1040的z索引:

<div class="modal-dialog" style="z-index: 1100;">

我相信bootstrap創(chuàng)建了一個div模態(tài)背景淡入淡出，在我的例子中z-index為1040，所以如果你把模態(tài)對話框放在它上面，它應(yīng)該不會再變灰了。

在你的navbar navbar-固定頂端需要z-index = 1041 如果你使用bootstarp-combined.min.css，也會發(fā)生變化。導(dǎo)航條-固定頂部，。導(dǎo)航條-固定底部z索引至1041

設(shè)置z索引。模態(tài)到最高值

舉個例子， 。sidebarwrapper的z索引為1100，因此將z索引設(shè)置為。莫代爾至1101

.modal {
    z-index: 1101;
}

在我的例子中解決它，在我的樣式表中添加這個:

.modal-backdrop{
  z-index:0;
}

這對我很有效:

sass: 
  .modal-backdrop
    display: none
  #yourModal.modal.fade.in
    background: rgba(0, 0, 0, 0.5)

您還可以從中移除z索引。模態(tài)背景。生成的css將如下所示。

.modal-backdrop {
}
  .modal-backdrop.in {
    opacity: .35;
    filter: alpha(opacity=35); }

我去掉了模態(tài)背景。

.modal-backdrop {
    display:none;
}

這不是更好的解決方案，但對我有效。

我發(fā)現(xiàn):

在bootstrap 3.3.0中是不對的，但在bootstrap 3.3.5中是對的。 3.3.0:

this.$backdrop = $('<div class="modal-backdrop ' + animate + '" />')
    .prependTo(this.$element)

3.3.5

this.$backdrop = $(document.createElement('div'))
        .addClass('modal-backdrop ' + animate)
        .appendTo(this.$body)

把這個加到你的頁面上。 它對我有用。

<script type="text/javascript">
    $('.modal').parent().on('show.bs.modal', function (e) { $(e.relatedTarget.attributes['data-target'].value).appendTo('body'); })
</script>