Question

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

<                                                       # Tags always begin
  (?                                                    # What if...
    (?=!--)                                             # We have a comment?
      !--[\s\S]*--                                      # If so, anything goes between <!-- and -->.
      |                                                 # OR
      (?                                                # What if...
        (?=\?)                                          # We have a scripting tag?
          \?[\s\S]*\?                                   # If so, anything goes between <? and ?>.
          |                                             # OR
          (?                                            # What if...
            (?=\/)                                      # We have a closing tag?
              \/                                        # It should begin with a /.
              [^.-\d]                                   # Then the tag name, which can't begin with any of these characters.
              [^\/\]'"[!#$%&()*+,;<=>?@^`{|}~ ]*        # And can't contain any of these characters.
              |                                         # OR... we must have some other tag.
              [^.-\d]                                   # Tag names can't begin with these characters.
              [^\/\]'"[!#$%&()*+,;<=>?@^`{|}~ ]*        # And can't contain any of these characters.
                (?:                                     # Do we have any attributes?
                  \s                                    # If so, they'll begin with a space character.
                  [^.-\d]                               # Followed by a name that doesn't begin with any of these characters.
                  [^\/\]'"[!#$%&()*+,;<=>?@^`{|}~ ]*    # And doesn't contain any of these characters.
                    (?:                                 # Does our attribute have a value?
                      =                                 # If so, the value will begin with an = sign.
                      (?:                               # The value could be:
                      "[^"]*"                           # Wrapped in double quotes.
                      |                                 # OR
                      '[^']*'                           # Wrapped in single quotes.
                      |                                 # OR
                      [^'"<\s]*                         # Not wrapped in anything.
                      )                                 # That does it for our attribute value.
                    )?                                  # If the attribute is boolean it won't need a value.
                )*                                      # We could have any number of attributes.
          )                                             # That does it for our closing vs other tag check.
          \s?                                           # There could be some space characters before the closing >.
          \/?                                           # There might also be a / if this is a self-closing tag.
      )                                                 # That does it for our script vs html tag check.
  )                                                     # That does it for our comment vs script tag check.
>

我的网页没有包含引导程序只包含jquery计时器文件的文件

<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>

模态代码如下

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

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

<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>

Answer 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');
}

Bootstrap模式弹出窗口立即打开和关闭

1 个答案: