Bootstrap 模态弹出窗口立即打开和关闭答案

【问题标题】：Bootstrap modal popup opens and closes immediatelyBootstrap 模态弹出窗口立即打开和关闭
【发布时间】：2023-03-16 05:35:02
【问题描述】：

我有一个显示学生成绩的引导弹出窗口，但它会立即打开和关闭。我的母版页文件包含以下 js 文件

<html xmlns="http://www.w3.org/1999/xhtml">
  <head runat="server">
   <title></title>
     <asp:ContentPlaceHolder ID="head" runat="server">
     </asp:ContentPlaceHolder>
   <script src="jquery-1.12.3.min.js" type="text/javascript"></script>
   <script src="js/bootstrap.js" type="text/javascript"></script>
   <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" />  
</head>

我的网页没有包含用于引导的文件，只有一个 jquery 计时器文件

<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link href="css/jquery.countdownTimer.css" rel="stylesheet" type="text/css" />
</asp:Content>

modal 的代码如下

<div class="modal fade" id="myModalTest" role="dialog">
<div class="modal-dialog">

  <!-- Modal content-->
  <div class="modal-content">
    <div class="modal-header">
     <%-- <button type="button" class="close" data-dismiss="modal">&times;</button>--%>
      <h4 class="modal-title text-center">RESULT</h4>
    </div>
    <div class="modal-body">
       <table class="table table-bordered" style="background-color:White" cellpadding="10" cellspacing="10">
    <tr>
        <td class="style1">
            <p class="text-justify"><asp:Label runat="server" ID="Label1" Text="Test Name :"></asp:Label>
        </td>
        <td>
            <asp:Label runat="server" ID="lbltest"></asp:Label>
        </td>
    </tr>
    <tr>
        <td class="style1">
            <asp:Label runat="server" ID="lblName" Text="Student Name :"></asp:Label>
        </td>
        <td>
            <asp:Label runat="server" ID="lbluname"></asp:Label>
        </td>
     </tr>
     <tr>
        <td class="style1">
            <asp:Label runat="server" ID="lblmks" Text="Total marks scored :"></asp:Label>
        </td>
        <td>
            <asp:Label runat="server" ID="lblmarksscored"></asp:Label>
        </td>
    </tr>
    <tr>
        <td class="style1">
            <asp:Label runat="server" ID="Label2" Text="Total questions attempted :"></asp:Label>
        </td>
        <td>
            <asp:Label runat="server" ID="lbltot"></asp:Label>
        </td>
    </tr>
    <tr>
        <td class="style1">
            <asp:Label runat="server" ID="Label3" Text="Total questions in Test :"></asp:Label>
        </td>
        <td>
            <asp:Label runat="server" ID="lbltotalTestQ"></asp:Label>
        </td>
    </tr>
 </table>
    </div>
    <div class="modal-footer">
      <asp:Button class="btn btn-default" runat="server" ID="btnBackModal" Text="back" OnClick="btnBackModal_Click"/>
     </div>
  </div>

</div>
</div>

即使是后退按钮的 ie btnBackModal OnClick 事件也不会触发。当我调试代码时，控件不会转到服务器端的那个事件。

 public void btnBackModal_Click(object sender, EventArgs e)
    {
        if (isSaved == 0)
            saveAnswer();
        Response.Redirect("StudentHome.aspx");
    }

【问题讨论】：

请包含您为模态编码的代码。
当然。我将编辑问题
请阅读Under what circumstances may I add “urgent” or other similar phrases to my question, in order to obtain faster answers? - 总结是这不是解决志愿者的理想方式，并且可能会适得其反。请不要将此添加到您的问题中。
我真的不是有意伤害某人或听起来粗鲁。如果我伤害了你，我很抱歉@halfer
没有受伤，SAM - 只是为已经承担了大量工作的志愿者挺身而出。

标签： javascript css asp.net twitter-bootstrap modalpopup

【解决方案1】：

我通过编写 javascript 函数来打开模式而不是使用按钮的 data-toggle 属性解决了这个问题。我删除了代码

<button input="button" class="btn btn-info" id="btnshowmodal" data-toggle="modal" data-target="#myModalTest">View Result</button>

而是编写了一个javascript函数来处理onclick事件。

HTML：

<button input="button" class="btn btn-info" id="btnshowmodal" onclick="popup();return false;" runat="server">View Result</button>

JS：

function popup() {
  $('[id*="myModalTest"]').modal('show');
}

【讨论】：