繁体   English   中英

如何使用Bootstrap Modal触发Onclick和Onclientclick?

[英]How to fire Onclick and Onclientclick with Bootstrap Modal?

这是我的标记:

附:我正在使用Metronic内置模板,其中包含所有内容。

<link href="vendors.bundle.css" rel="stylesheet" type="text/css">
    <link href="style.bundle.css" rel="stylesheet" type="text/css">
    <script src="jquery.min.js" type="text/javascript"></script>
    <script src="scripts.bundle.js" type="text/javascript"></script>
    <script src="vendors.bundle.js" type="text/javascript"></script>
    <script src="bootstrap-datepicker.js" type="text/javascript"></script>

<script>
        $(function () {

            $('#trigger').click(function () {
                $('#myModal').modal("toggle");
                return false;
            })

        });
    </script>

这是我的代码:

<asp:Button runat="server" ID="trigger" OnClick="Unnamed_Click" Text="Click"/>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
<div class="modal-header">
    <h5 class="modal-title" id="exampleModalLabel">Bootstrap Date Picker Examples</h5>
    <asp:Label runat="server" ID="ShowLbl"></asp:Label>
    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
        <span aria-hidden="true" class="la la-remove"></span>
    </button>
</div>
<div class="modal-body">
    <div class="form-group m-form__group row m--margin-top-20">
        <label class="col-form-label col-lg-3 col-sm-12">Minimum Setup</label>
        <div class="col-lg-9 col-md-9 col-sm-12">
<input type="text" class="form-control" id="m_datepicker_1_modal" readonly="" placeholder="Select date">
        </div>
    </div>
    <div class="form-group m-form__group row">
        <label class="col-form-label col-lg-3 col-sm-12">Input Group Setup</label>
        <div class="col-lg-9 col-md-9 col-sm-12">
<div class="input-group date">
    <input type="text" class="form-control m-input" readonly="" placeholder="Select date" id="m_datepicker_2_modal">
    <div class="input-group-append">
        <span class="input-group-text">
<i class="la la-calendar-check-o"></i>
        </span>
    </div>
</div>
        </div>
    </div>
    <div class="form-group m-form__group row m--margin-bottom-20">
        <label class="col-form-label col-lg-3 col-sm-12">Enable Helper Buttons</label>
        <div class="col-lg-9 col-md-9 col-sm-12">
<div class="input-group date">
    <input type="text" class="form-control m-input" value="05/20/2017" id="m_datepicker_3_modal">
    <div class="input-group-append">
        <span class="input-group-text">
<i class="la la-calendar"></i>
        </span>
    </div>
</div>
<span class="m-form__help">Enable clear and today helper buttons</span>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-brand m-btn" data-dismiss="modal">Close</button>
    <button type="button" class="btn btn-secondary m-btn">Submit</button>
</div>
        </div>
    </div>
</div>

当我加载模态时,将触发clientclick。

我也想相应地触发onclick事件。 如何使其成为可能? 这是我第一次问一个问题。 请可以帮我吗?

这是我的后端:

protected void Unnamed_Click(object sender, EventArgs e)
{
   //ShowLbl.Text = "Clicked";
    do some SQL Work ();
    then show it to modal();
 }

C#:

protected void Unnamed_Click(object sender, EventArgs e)
{
    myModal.Visible = true;
   //ShowLbl.Text = "Clicked";
    do some SQL Work ();
    then show it to modal();
 }

HTML:

<div runat="server" Visible="False" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="display: none;" aria-hidden="true;">

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM