显示模态弹出窗口

时间:2016-06-21 09:27:53

标签: javascript jquery

这里我试图通过使用按钮点击事件来显示模态弹出窗口。

这是模态弹出部门

<div id="myModalPopup" class="modal fade" role="dialog" data-keyboard="false">//Modal popup
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header" style="background-color: orangered; border-top-left-radius: 4px; border-top-right-radius: 4px;">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Company Details</h4>
        </div>
        <div class="modal-body">
            <asp:Panel ID="Panel2" runat="server" class="tab-pane">
                <div class="col-sm-12">
                    <div class="row">
                        <div class="col-sm-4">
                            <asp:Label runat="server" ID="lblNmeComp" Text="Name of Company" AssociatedControlID="txtNmeComp" CssClass="control-label" />
                            <asp:TextBox runat="server" ID="txtNmeComp" CssClass="form-control" />
                            <br />
                        </div>
                        <div class="col-sm-4">
                            <asp:Label runat="server" ID="lblAdrComp" Text="Address of Company" AssociatedControlID="txtAdrComp" CssClass="control-label" />
                            <asp:TextBox runat="server" ID="txtAdrComp" CssClass="form-control" />
                            <br />
                        </div>

这是我的按钮代码

<button id="AddMore_Button" class="btn btn-primary" data-target="myModalPopup">Add More</button> //button for Add more

这是我的Jquery。

<script type="text/javascript">
$(document).ready(function () {

 // Attach Button click event listener 
    $("#AddMore_Button").click(function () {
      $('#myModal').modal('show');
 // alert('a');
});
});
    </script>

当我点击按钮时,它没有显示任何内容,然后刷新并转到第一个屏幕。如果我发出警报()它会触发并按下OK后发生同样的事情。

1 个答案:

答案 0 :(得分:1)

尝试此操作以显示模态

$('#myModalPopup').modal('show');