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

I have this link-button:

我有这个链接按钮:

<a href="javascript: void(0)"><button class="btn btn-primary pull-right" id="btn">Read More</button></a>

I want onclick hit, a modal popup appears with all the article details.I have tried a lot until now but nothing runs properly.Any ideas?

我想onclick hit,一个模态弹出窗口显示所有的文章细节。我已经尝试了很多,但没有任何正常运行。任何想法?

UPDATED

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

UPDATED (image)

2 个解决方案

#1

If you are using Bootstrap , please see below example

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

#2

I think the main problem is with this code:

我认为主要问题是这个代码:

<a href="">

As there is no value in href, so whenever you'll click on the button actually it will click on that anchor tag and the page will refresh. You can use this:

因为href中没有值,所以每当你点击按钮时,它会点击那个锚标签,页面就会刷新。你可以用这个:

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

Or on the click function you can get the event and use preventDefault.

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

Hope this will help you. Thanks.

希望这会帮助你。谢谢。

#1