Question

我有这个链接按钮：

<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');
});
});

更新（图片）

Answer 1

如果您使用的是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">&times;</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');
});

Answer 2

我认为主要问题在于此代码：

<a href="">

由于href中没有值，所以每当您点击该按钮时，它实际上会点击该锚标记，页面将刷新。你可以用这个：

<a href="javascript:void(0);">

或者在点击功能上，您可以获取事件并使用preventDefault。

希望这会对你有所帮助。感谢。

Answer 3

我没有使用一些自定义的 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 即可工作。

如何在按钮单击时打开模态弹出窗口

3 个答案: