在模态运行之前启动模态onclick

时间:2015-11-13 09:52:38

标签: jquery onclick modal-dialog bootstrap-modal

我在我的网站上使用bootstap模式,我希望能够在调用时设置模型的文本

为此我打算使用onclick功能。

例如: 当用户点击按钮"删除列表"弹出一个模态,其中包含我在该特定onclick函数中设置的标题:

protected void ButtonLogin_Click(object sender, EventArgs e)
{
    //check what user category was selected and login to appropriate page
    if (DropDownListUserType.SelectedIndex == 1)
    {
        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Web_FussConnectionString"].ConnectionString);

        con.Open();
        SqlCommand cmd = new SqlCommand("select * from Team_User where Email = @username and Password_1 = @password", con);

        cmd.Parameters.AddWithValue("@username", UserName.Text);
        cmd.Parameters.AddWithValue("@password", Password.Text);

        SqlCommand cmdID = new SqlCommand("select Team_ID from Team_User where Email = @username and Password_1 = @password", con);

        cmdID.Parameters.AddWithValue("@username", UserName.Text);
        cmdID.Parameters.AddWithValue("@password", Password.Text);

        SqlDataAdapter da = new SqlDataAdapter(cmd);
        DataTable dt = new DataTable();
        da.Fill(dt);

        if (dt.Rows.Count > 0)
        {
            SqlDataReader reader = cmdID.ExecuteReader();
            int Team_ID = reader.GetInt32(1);
            Session["Team_ID"] = Team_ID;
            Response.Redirect("AddPlayer.aspx");
        }
        else
        {
            ClientScript.RegisterStartupScript(Page.GetType(), "validation", "<script language='javascript'>alert('Invalid Username and Password')</script>");
        }
    }
}

然而一个按钮&#34; save&#34;也可以按下,如果标题应该说不同的东西。

但是当我单击其中一个按钮时,模式会在函数运行之前显示,因此未设置标题文本。

我可以使用onclick函数在模态中设置文本吗? 或者我必须找到另一种方式吗?

2 个答案:

答案 0 :(得分:2)

当然,您可以在模态中设置文本。

<script>

function functionCalledByOnclickDelete(){
  $("#modalname .modal-body p").text("Are you sure you want to remove **?");
  $('#modalname').modal('show');
}

function functionCalledByOnclickSave(){
  $("#modalname .modal-body p").text("Are you sure you want to save **?");
  $('#modalname').modal('show');
}

</script>

<div class="modal fade" id="modalname" tabindex="-1" role="dialog" aria-labelledby="simpleModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-body">
                <p>This text will be replaced after the function is called.</p>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

答案 1 :(得分:2)

使用JQuery可以更轻松地使用这样的onclick事件。这样你只需要为每个按钮分配一个id,而且眼睛也更容易。

$(document).ready( function () {
    var deleteText = "<p>Are you sure you want to remove **?</p>";
    var saveText = "<p>Do you want to save **?</p>";

    $("#deleteButton").click( function () {
        $("#modalHeader").html(deleteText);
        $("#modal").modal("show");
    });

    $("#saveButton").click( function () {
        $("#modalHeader").html(saveText);
        $("#modal").modal("show");
    });
});

你当然可以通过删除变量来缩短变量,但这更有条理。