![](/img/trans.png)
[英]Bootstrap navbar will disappear when clicking the toggle button on small devices
[英]Disallow Bootstrap 4 modal to disappear when clicking a button
我在我的網站上使用 Bootstrap 4 模式。 在該模式中,我有 2 個按鈕:計算和發送。
我不希望單擊計算時窗口消失。 我怎樣才能做到這一點?
我試圖將模態的屬性更改為display:block;
當我點擊計算但它不起作用。
這是模態的代碼。
<div class="modal fade" id="myModal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">SEND AN ORDER</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<form action="" class="form-group">
<div class="form-group">
<input type="text" placeholder="First name" class="form-control">
</div>
<div class="form-group">
<input type="text" placeholder="Last name" class="form-control">
</div>
<div class="form-group">
<input type="text" placeholder="Organisation(optional)" class="form-control">
</div>
<div class="form-group">
<select class="form-control" id="meat">
<option value="" selected disabled>Please select a meat</option>
<?php
foreach ($res as $meat) {
?>
<option value="<?php echo $meat->name.';'.$meat->price_per_kg;?>"><?=$meat->name;?></option>
<?php
}
?>
</select>
</div>
<div class="form-group">
<input type="number" class="form-control" id="quantity" placeholder="Quantity(in Kg)" min="5">
</div>
<div class="form-group">
<div class="ui labeled input">
<div class="ui label">
+250
</div>
<input type="text" placeholder="Phone number" name="phone_n">
</div>
</div>
<div class="form-group">
<input type="email" placeholder="Email" name="email" class="form-control">
</div>
<div class="form-group">
<textarea name="add_info" name="add_info" cols="40" class="form-control" rows="5" placeholder="Additional infos(place to deliver,...)"></textarea>
</div>
<button class="btn btn-zco btn-md" id="calculate">Calculate</button>
<button class="btn btn-zco btn-block">SEND</button>
</form>
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
問題是您的 數據屬性,它指示引導程序的 JS 關閉模態。
<button class="btn btn-zco btn-md"
data-target="#myModal" data-toggle="modal" - <---- Remove these two attributes
data-backdrop="static" data-keyboard="false" id="calculate">Calculate</button>
使計算按鈕類似於發送按鈕並刪除data-toggle="modal"
和data-target="#myModal"
例如。
<button class="btn btn-zco btn-md" id="calculate" >Calculate</button>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.