引导模式弹出窗口c#背后的代码

本文关键字：背后 代码 窗口 模式 | 更新日期: 2023-09-27 18:06:34

我在我的c# asp.net项目中使用bootstrap，我想展示从代码后面显示模态弹出窗口。

在我的页头我有一个javascript函数如下:

function LoginFail() {
        $('#windowTitleDialog').modal('show');
    }

和在点击我的按钮，我调用javascript如下

ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "LoginFail", "LoginFail();", true);

不显示模态弹出。但是，如果我使用类似alert('login failed')的东西，它工作得很好。

有谁能帮帮忙吗?

引导模式弹出窗口c#背后的代码

默认情况下，Bootstrap javascript文件包含在结束body标签之前

    <script src="vendors/jquery-1.9.1.min.js"></script>
    <script src="bootstrap/js/bootstrap.min.js"></script>
    <script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
    <script src="assets/scripts.js"></script>
 </body>

我把这些javascript文件放到body标签之前的head部分，我写了一个小函数来调用模式弹出:

<script src="vendors/jquery-1.9.1.min.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/easypiechart/jquery.easy-pie-chart.js"></script>
<script src="assets/scripts.js"></script>
<script type="text/javascript">
function openModal() {
    $('#myModal').modal('show');
}
</script>
</head>
<body>

，然后我可以从代码后面调用模式弹出:

protected void lbEdit_Click(object sender, EventArgs e) {   
  ScriptManager.RegisterStartupScript(this,this.GetType(),"Pop", "openModal();", true);
}

我是这样解决的:

Script函数

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

按钮声明

<asp:Button ID="LaunchModal" runat="server" Text="Launch Modal" CssClass="btn" onclick="LaunchModal_Click"/>

注意属性data-togle="modal"没有设置。

在LaunchModal_Click事件中的服务器端代码是: 
ScriptManager.RegisterStartupScript(this, this.GetType(), "LaunchServerSide", "$(function() { LoginFail(); });", true);

我假设，您正在使用一个jQuery模态插件。在这种情况下，我怀疑插件代码在调用时没有初始化(这将在它被呈现到页面之后立即初始化)。在执行插件代码后，必须推迟对函数的调用。您的案例的实现可能如下所示:

ScriptManager.RegisterClientScriptBlock(this, typeof(System.Web.UI.Page), "LoginFail", "$(function() { LoginFail(); });", true);

我有同样的问题，试图找到在线解决方案，但我无法这样做。我能够调用其他javascript函数，因为你从后面的代码说，但当我添加模态js函数模态不出现。

我的猜测是modal.('show')函数没有被调用，因为当我在crhome中检查modal元素时，类是modal hide fade而不是modal hide fade in，其他属性保持不变。

一个可能的解决方案是从后面的代码改变这些属性，我的意思是你可以做什么js做背后的代码，可能不是最好的解决方案，但我没有别的办法。通过这样做，我得到了模态显示背景灰色，但不能使效果工作。

我在aspx页面中这样做:

<asp:Panel ID="MessagePanel" runat="server" CssClass="hide"  EnableViewState="false">
<div class="modal-header">
<asp:Button type="button" ID="btnClose" runat="server" data-dismiss="modal" Text="x" />
</div>
<div class="modal-body">
<h4>What's new in this version</h4>
... rest of bootstrap modal stuff....
</div>
</asp:Panel>

然后在代码后面显示任何事件(如页面)上的模式弹出。我只是改变面板的CssClass:

MessagePanel.CssClass = "modal fade in"
不需要js或ScriptManager
相关文章：