Question

我有一个调用bootstrap模式弹出窗口的Js函数。我点击按钮后面的代码调用这个Js函数。问题是，当我点击按钮时，它显示模态弹出窗口，但是当我导航到另一个页面时（当我点击另一个按钮时，它导航到谷歌文档阅读器）并返回到主页，它又一次没有任何按钮点击加载弹出窗口。任何人都可以帮助我。

JS功能

<head>
 <script type="text/javascript">
            function showModal() {
                $('#viewOc').modal();
            };
    </script>
</head>

模态弹出代码

 <div class="modal fade" id="viewOc" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>TRIAL</h4>
                </div>
                <div class="modal-body">
                    LOREM IPSUM
                </div>
                <div class="modal-footer">
                    <a class="btn btn-primary" data-dismiss="modal">
                        Close
                    </a>
                </div>
            </div>
        </div>
    </div>

背后的代码

 protected void LinkButton1_Click(object sender, CommandEventArgs e)
            {
                //some operations here
                string script = "window.onload = function() { showModal(); };";
                ClientScript.RegisterStartupScript(this.GetType(), "modalShow", script, true); 
            }

Html代码

<asp:LinkButton ID="LinkButton1" runat="server" Text="Click Here" CausesValidation="false" commandArgument='<%#Eval("value")%>' OnCommand="LinkButton1_Click"/>

Google文档按钮点击事件

 protected void btnView_View(object sender, CommandEventArgs e)
        {
            //not sure if the below code is correct or wrong. But as of now im using this in my application. Didnt try it on server yet.
            string path = e.CommandArgument.ToString();
            Response.Redirect("http://docs.google.com/viewer?url=" + Server.UrlEncode(path),true);
        }

页面加载

protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                IndexDocuments();

            }
        }

P.S：我知道类似的问题但在SO中提出了不同的问题。由于我没有足够的声誉来评论这个问题，我不得不发一个新帖子。

Answer 1

你应该按下按钮

来调用模型

$('buttonID').click(function(){ $('modalID').modal('show'); });

你正在调用window.onload上的模态，这就是为什么它在页面加载时弹出的原因。

Answer 2

Vishal在下面提到了一种更好的处理方法。

$（＆＃39; buttonID＆＃39;）。点击（function（）{$（＆＃39; modalID＆＃39;）。modal（＆＃39; show＆＃39;）;}）;

您可以使用带有上述代码的普通HTML按钮，而不是使用ASP按钮。

谢谢， Souvik

Answer 3

每次窗口加载时，您都会绑定showModal（）。像这样更改代码隐藏：

protected void LinkButton1_Click(object sender, CommandEventArgs e)
        {
            //some operations here
            ScriptManager.RegisterStartupScript(this, this.GetType(), "modalShow", "showModal()", true); 
        }

Answer 4

添加js和css引用

<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"> </script>

<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script type="text/javascript">
        function showModal() {
            $('#viewOc').modal();
        };
</script>

</head>

使用此代码：

protected void LinkButton1_Click(object sender, CommandEventArgs e)
{
    //some operations here
    if(!ClientScript.IsStartupScriptRegistered("JSScript"))
    {
      ClientScript.RegisterStartupScript(this.GetType(),"JSScript",
      @"<script type='text/javascript'>showModal()</script>");
    } 
}

单击按钮调用JavaScript函数后面的代码 - C＃