gpt4 book ai didi

html - bootstrap模态框背景不透明不全屏

转载 作者:太空宇宙 更新时间:2023-11-04 08:24:26 25 4
gpt4 key购买 nike

我试图将引导模式框链接到图像按钮。单击图像按钮时将显示模态框。谁知道如何让模态框的背景透明全屏?

这是我的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>

这是我点击图片后的输出 enter image description here

最佳答案

.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;
}

关于html - bootstrap模态框背景不透明不全屏,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45273365/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com