引导模态框背景不透明且不全屏答案

【问题标题】：bootstrap model box background is not transparent and not fullscreen引导模态框背景不透明且不全屏
【发布时间】：2017-07-24 05:44:00
【问题描述】：

我尝试将引导模式框链接到图像按钮。单击图像按钮时将显示模态框。任何人都知道如何使模态框的背景透明和全屏？

这是我的html文件

<!DOCTYPE html>
<html>
<style>
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.modal-dialog {
    width: 100%;
    height: 100%;
    padding: 0;
    margin: 0;
}
.modal-content {
    height: 100%;
    min-height: 100%;
    height: auto;
    border-radius: 0;
}
</style>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" type="text/css" href="css/ionic.min.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <title>Add an item</title>

</head>
<body onload="selectCategory()">
<div class="bar bar-header">
    <a href="index.html" class="button button-clear button-royal">Back</a>
    <h1 class="title">Add Item</h1>

</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</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>
</div>

<div class="padding" style="margin-top:75px;">
    <label class="item-input">
        <input name="photo1" id="photo1" type="image"
               src="images/photo-icon.png"
               onclick=""
               width="20%"
               data-toggle="modal" data-target="#myModal"/>

        <input name="photo2" id="photo2" type="image"
               src="images/photo-icon.png"
               onclick=""
               width="20%"  />

        <input name="photo3" id="photo3" type="image"
               src="images/photo-icon.png"
               onclick=""
               width="20%"  />

        <input name="photo4" id="photo4" type="image"
               src="images/photo-icon.png"
               onclick=""
               width="20%"  />

        <input name="photo5" id="photo5" type="image"
               src="images/photo-icon.png"
               onclick=""
               width="20%"  />
    </label>

    <label class="item-input">
        <span class="input-label">Item Name</span>
        <input type="text" placeholder="" id="itemName">
    </label>
    <label class="item-input">
        <span class="input-label">Category</span>
        <select id="select_category" name="select_category">
            <option value="0">- Select -</option>
        </select>
    </label>
    <label class="item-input">
        <span class="input-label">Price</span>
        <input type="number" placeholder="" id="price">
    </label>


    <label class="item-input">
        <button class="button button-block button-positive" id="addProduct">Add item</button>
    </label>


</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/jq.js"></script>
<script type="text/javascript" src="js/addProduct.js"></script>

</body>

</html>

这是我点击图片后的输出

【问题讨论】：

试试这个 .modal-content:{background-color:transparent;}
试过了，但没有任何改变
你需要改变黑色背景颜色吗
如果我错了请纠正我。你想在点击图片时打开模型弹出窗口吗？
@Chandra Shekhar 我只是想让模态框外的背景变得透明，整个模态框变成全屏

标签： html css bootstrap-modal imagebutton

【解决方案1】：

.modal-backdrop.in {
background: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}

【讨论】：

【解决方案2】：

如果你想让模态框的外部区域变成白色。

然后使用这个：

.modal-open .modal{
   background: #fff !important;
}

【讨论】：

背景仍然是白色的。模态框的宽度已经适合白色背景，但还不是全屏。
其实我只是想让模态框外的白色背景看起来像我上传的图片的右侧，但我就是无法删除模态框外的白色背景
您希望模态框的外部区域变为白色。如果是，那么我将向您发布另一个代码。您将尝试该代码。
我想去掉模态框外的白色背景
我找到了解决方案，将其添加到 css 部分 .fade.in {background-color: transparent;}

【解决方案3】：

我找到了解决方案。将此添加到 css 部分

.fade.in {background-color: transparent;}

【讨论】：

【解决方案4】：

只需添加以下代码：

<style>

.modal-backdrop.in{
opacity: 0 !important;
}

</style>

【讨论】：

【解决方案5】：

我建议使用这个..

    .modal-backdrop.in {
background: rgba(0, 0, 0, 0.5);
}
.modal-dialog {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.modal-content {
  height: auto;
  min-height: 100%;
  border-radius: 0;
}


I assume you are looking for a lightbox kind of effect in you modal. If so try here some links that can help you further..
https://bootsnipp.com/snippets/7XVM2 
http://ashleydw.github.io/lightbox/ 
https://codepen.io/webcane/pen/bNEOXZ

【讨论】：