第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何創(chuàng)建“模態(tài)”底部橫幅

如何創(chuàng)建“模態(tài)”底部橫幅

胡子哥哥 2023-10-14 16:06:51
我使用的框架:MDB。我想創(chuàng)建一種放置在底部的 div,當(dāng)用戶滾動時,它會繼續(xù)跟隨頁面,有點像粘性內(nèi)容。在MDB網(wǎng)站上,有一個解決方案是模態(tài)底部,我可以通過JavaScript自動打開它,而無需用戶按下按鈕,問題是它完全掩蓋了<body>怎樣才能達(dá)到這樣的效果而又不讓頁面黑屏呢?代碼:<!-- Button trigger modal --><button type="button" class="btn btn-primary" data-toggle="modal" data-target="#frameModalBottom">    Launch demo modal</button><!-- Frame Modal Bottom --><div class="modal fade bottom" id="frameModalBottom" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"     aria-hidden="true">    <!-- Add class .modal-frame and then add class .modal-bottom (or other classes from list above) to set a position to the modal -->    <div class="modal-dialog modal-frame modal-bottom" role="document">        <div class="modal-content">            <div class="modal-body">                <div class="row d-flex justify-content-center align-items-center">                    <p class="pt-3 pr-2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit nisi quo                        provident fugiat reprehenderit nostrum                        quos..                    </p>                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>                    <button type="button" class="btn btn-primary">Save changes</button>                </div>            </div>        </div>    </div></div><!-- Frame Modal Bottom -->
查看完整描述

3 回答

?
天涯盡頭無女友

TA貢獻1831條經(jīng)驗 獲得超9個贊

.modal-backdrop {
    display:none;
}


查看完整回答
反對 回復(fù) 2023-10-14
?
HUX布斯

TA貢獻1876條經(jīng)驗 獲得超6個贊

我想創(chuàng)建一種放置在底部的 div,當(dāng)用戶滾動時,它會繼續(xù)跟隨頁面,有點像粘性內(nèi)容。


你可以用position:sticky它來粘在底部......這是“有點像粘”


#content {

  height: 800px;

  border: 1px solid red;

}


#bottom {

  border: 1px solid blue;

  width: 100%;

  background-color: #CCC;

  text-align: center;

  position: sticky;

  bottom: 0;

}

<div id="content">

</div>

<div id="bottom">

  bottom

</div>

如果您愿意,可以小提琴: https: //jsfiddle.net/c0me5d63/

如果您不想/不能使用position:sticky那么您可以使用position:fixed

#content {

  height: 800px;

  border: 1px solid red;

  margin-bottom:1.5em;

}


#bottom {

  border: 1px solid blue;

  width: 100%;

  background-color: #CCC;

  text-align: center;

  position:fixed;

  bottom:0;

}

<div id="content">

</div>

<div id="bottom">

  bottom

</div>


查看完整回答
反對 回復(fù) 2023-10-14
?
瀟瀟雨雨

TA貢獻1833條經(jīng)驗 獲得超4個贊

這可以通過消除黑滴的不透明度來完成

.modal-backdrop
{    opacity:0.5 !important;
}


查看完整回答
反對 回復(fù) 2023-10-14
  • 3 回答
  • 0 關(guān)注
  • 178 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學(xué)習(xí)伙伴

公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號