如何在按钮单击时打开模态弹出窗口
[英]How to open Modal popup on button click
问题描述
我有这个链接按钮：
<a href="javascript: void(0)"><button class="btn btn-primary pull-right" id="btn">Read More</button></a>
我想要onclick点击，出现一个包含所有文章详细信息的模式弹出窗口。到目前为止，我已经尝试了很多，但没有任何运行正常。有什么想法吗？
更新
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false
})
$('#btn').click(function() {
$("#dialog").dialog({
modal: true,
height: 600,
width: 500,
buttons: {
Accept: function() {
$(this).dialog("close");
}
}
});
$('#dialog').dialog('open');
});
});
更新（图片）
4 个解决方案
解决方案1
4 2016-06-23 09:35:21
如果您使用的是 Bootstrap，请参见下面的示例
<div class="modal fade" id="modelWindow" role="dialog">
<div class="modal-dialog modal-sm vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Heading</h4>
</div>
<div class="modal-body">
Body text here
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn btn-default">Close</button>
</div>
</div>
</div>
</div>
$('#btn').click(function() {
$('#modelWindow').modal('show');
});
解决方案2
0 2016-06-23 08:53:12
我认为主要问题在于这段代码：
<a href="">
由于 href 中没有任何值，因此无论何时您实际上单击该按钮，它都会单击该锚标记并且页面将刷新。 你可以使用这个：
<a href="javascript:void(0);">
或者在单击功能上，您可以获得事件并使用 preventDefault。
希望这会帮助你。 谢谢。
解决方案3
0 2021-03-15 14:47:14
我没有使用一些自定义 css 或 js 就得到了它。 它适用于 bootstrap.js 和 bootsrap.css。
<html>
<head>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<!--> Your Dialog Field -->
<div class="dialog">
Some Text Some Captions and/or images etc..
<button class="btn btn-warning" data-toggle="modal" data-target="#modal1">Show More</button>
</div>
<!--> Your Modal Field -->
<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modallabel1" aria-hidden= "true">
<h1>Some Text for the Modals
Some Text for the Modals
Some Text for the Modals
Some Text for the Modals</h1>
</div>
</html>
有更好的例子（ Bootstrap Modals ），但是没有自己的 js 也可以。
解决方案4
0 2022-05-31 15:42:35
您可以按照说明使用 Booststrap Modal Popup
步骤1
添加引导模式容器
**步骤：-2** 添加按钮以显示模式弹出保存 function getBuiltyUpdateForm(id, dcNo) { $('#builtyUpdateModal').modal('show'); } function saveRecord() { alert{"It's Working"} }
<a onclick="getBuiltyUpdateForm()" class="btn btn-sm btn-warning btn-lg mtn-xs"><i class="fa fa-plus" title="Update"></i></a> <div class="container"> <div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Add Builty Number</h4> </div> <div class="modal-body"> <div class="row"> <div class="form-group"> <div class="col-md-3"> <label>DC Number</label> <input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" disabled autocomplete="off" class="form-control" /> <p id="dcNumber"></p> </div> <div class="col-md-3"> <label>Builty Date</label> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input id="builtyDate" data-validation="required" data-validation-error-msg="Date is required" data-validation-error-msg-container="#builtyDate" class="form-control custom-date-picker" type="text" value="31-May-2022" disabled /> </div> <p id="builtyDate"></p> </div> <div class="col-md-6"> <input type="hidden" id="hdndcId" /> <label>Builty Number</label> <input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" /> <p id="builtyNumber"></p> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>
function saveRecord(){ alert("It's Working") } <div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Add Builty Number</h4> </div> <div class="modal-body"> <div class="row"> <div class="form-group"> <div class="col-md-3"> <label>DC Number</label> <input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" disabled autocomplete="off" class="form-control" /> <p id="dcNumber"></p> </div> <div class="col-md-3"> <label>Builty Date</label> <div class="input-group date"> <span class="input-group-addon"><i class="fa fa-calendar"></i></span> <input id="builtyDate" data-validation="required" data-validation-error-msg="Date is required" data-validation-error-msg-container="#builtyDate" class="form-control custom-date-picker" type="text" value="31-May-2022" disabled /> </div> <p id="builtyDate"></p> </div> <div class="col-md-6"> <input type="hidden" id="hdndcId" /> <label>Builty Number</label> <input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" /> <p id="builtyNumber"></p> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" id="builtyNumberUpdatebtn" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
function saveRecord(){ alert("It's Working") } <div class="modal fade" id="builtyUpdateModal" role="dialog" style="margin-left:0px"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Add Builty Number</h4> </div> <div class="modal-body"> <div class="row"> <div class="form-group"> <div class="col-md-3"> <label>Field 1</label> <input id="dcNo" onkeypress="return isCharacter()" onpaste="return false;" ondrop="return false;" type="text" data-validation="required" data-validation-error-msg="DC number is required" autocomplete="off" class="form-control" /> <p id="dcNumber"></p> </div> <div class="col-md-3"> <input type="hidden" id="hdndcId" /> <label>Field 2</label> <input id="builtyNumber" autofocus type="text" data-validation="required" data-validation-error-msg="Builty number is required" autocomplete="off" class="form-control" /> <p id="builtyNumber"></p> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" id="builtyNumberUpdatebtn" onclick="saveRecord()" class="btn btn-primary" data-dismiss="modal">Submit</button> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div>
解决方案5
-1 2021-10-29 05:52:06
我们将讨论在数据库管理员的日常情况中使用的查询。 命令本身不会真正做任何事情，除非它们形成一个查询。 让我们进入正题。
如何修复在单击按钮打开后立即关闭的模式弹出窗口
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.