laravel 如何在laravel中显示引导弹出模式?
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/47546927/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to show a bootstrap popup modal in laravel?
提问by Eshan Chattaraj
I want to open popup a modal on resource page using java-script or predefined function in laravel.
我想在资源页面上使用 java-script 或 laravel 中的预定义函数打开一个模式。
回答by Niket Joshi
may be,
或许,
you have want to open pop up using js in blade template so for that
您想在刀片模板中使用 js 打开弹出窗口
add the button in the blade file and before that add bootstrap.css file in it.
在刀片文件中添加按钮,然后在其中添加 bootstrap.css 文件。
<button type="submit" class="donate_now btn btn-default-border-blk generalDonation" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#myModalHorizontal">donate now</button>
Design modal according that like this in same page
在同一页面中像这样设计模态
<!-- Modal -->
<div class="modal fade" id="myModalHorizontal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header" style="background: orange">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true" class="ion-android-close"></span></button>
<h4 class="modal-title" id="myModalLabel" style="color: whitesmoke;">Donation For Siddhyog Sadhan Mandal</h4>
</div> <!-- Modal Body -->
<div class="modal-body">
<div>
Payment Option
</div>
<form id="frm-donation" name="frm-donation">
<div class="header-btn">
<div id="div-physical">
<label>
<input id="rdb_physical" name="rdb_donation" value="0" type="radio" checked="" class="validate[required]" data-errormessage-value-missing="Donation Type is required!">
Physical Entity Donation
</label>
</div>
</form>
<div class="modal-body">
<div class="modal-footer" id="modal_footer">
<!--<input id="btnSubmit" name="btnSubmit" value="Donate" class="btn btn-default-border-blk" type="submit">-->
<a id="btnDonate" class="btn btn-default-border-blk">Donate</a>
</div>
</div>
</div>
</div>
</div>
and you can see the modal work on page but for that make sure about ID on data-target="#myModalHorizontal" and modal's id id="myModalHorizontal"
您可以在页面上看到模态工作,但为此请确保 data-target="#myModalHorizontal" 上的 ID 和模态的 id="myModalHorizontal"