Question

如何在打开模态而不是模态的叠加效果时显示背景图像？我尝试将css添加到模态，但样式仅应用于模态。代码

<div class="modal hide" id="sourceModal" style="top: 95%; left: 50%;position:absolute;">
        <div class="modal-header">
            <div class="popup-header">
                <a class="close popup-close" onclick="closePopupnonmappedmodal();">×</a>
                <h3 class="medium" style="line-height: 35px;">
                   Information</h3>
            </div>
        </div>
        <div class="modal-body">
            <div class="row-fluid" style="margin-top: 10px">
                <div class="span12">
                    <div id="Div3">
                       <p>Paste HTML of your landing page here.</p>
                       <p> Learn More. Learn More links to help article:</p>
                       <a href=" http://help.leadsquared.com/creating-landing-page-from-html"> http://help.leadsquared.com/creating-landing-page-from-html 
                       </a>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal-footer" style="background-color: #efefef; text-align: center">
            <%: Html.CancelButton("ButtonCancel", onClick: "closePopupnonmappedmodal()", isDataDismiss: true)%>
        </div>
    </div>

Answer 1

只需将背景添加到.modal

即可

所有模态：

.modal {
    background: /* your background */
  }

特定模式：

#myModal{
        background: /* your background */
      }

DEMO

Answer 2

尝试添加“!important”以覆盖默认模态背景样式

.modal {
    background: url('imapge_path') !important;
  }

Bootstrap模态背景

2 个答案: