bootstrap中模态框与button控件Onclick冲突问题

oPaiPaiXiong12 2017-06-26 09:56:04



<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Select.aspx.cs" Inherits="ips.Select" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <meta charset="utf-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="Content/bootstrap.css"/>

    <link rel="stylesheet" type="text/css" href="Content/site.css">

    <!--[if lt IE 9]>

      <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>

      <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>

    <![endif]-->

    <title>查询</title>

</head>

<body>

        <div class="container">

        <h1 class="text-primary">查询</h1>

        <hr>

    </div>

   <form id="form1" role="form" runat="server">

    <div class="row">

<div class="container">

        <div class="col-sm-6 col-sm-offset-3 col-xs-12">

        	<div class="col-sm-10 col-xs-8">

                <asp:TextBox ID="TextBox1" class="input-lg form-control" runat="server" placeholder="请输入"></asp:TextBox>

        	</div>

			<div class="col-sm-2 col-xs-4">

                <button type="button" class="btn btn-primary btn-lg form-inline" data-toggle="modal" data-target="#mymodal-data">查询</button>

	        <asp:Button type="button" class="btn btn-primary btn-lg form-inline"  data-toggle="modal" data-target="#mymodal-data"  runat="server" Text="查找"  ID="Button1"  OnClick="Button1_Click" />

            </div>

        </div>  

    </div>

        </div>

    <footer class="container">

    	<hr>

    	<p>2017 All Rights Reserved</p>

    </footer>

    	<!-- data-target触发模态弹出窗元素 -->

		<!-- 模态弹出窗内容 -->

			<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">

 			<div class="modal-dialog">

 			<div class="modal-content">

 			<div class="modal-header bg-primary">

 				<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>

 				<h4 class="modal-title">查询结果</h4>

 			</div>

 			<div class="modal-body">

 				<p><asp:Label ID="Label1" runat="server" Text=""></asp:Label><br><asp:Label ID="Label2" runat="server" Text=""></asp:Label><br><asp:Label ID="Label3" runat="server" Text=""></asp:Label><br><asp:Label ID="Label4" runat="server" Text=""></asp:Label></p>

 			</div>

 			<div class="modal-footer">

                <asp:Button ID="Button2" runat="server" type="button" Text="查看" class="btn btn-primary" OnClick="Button2_Click" />

 				<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

 			</div>

 			</div>

 			</div>

			</div>

                   </form>

    	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->

    <script src="Scripts/jquery.min.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->

    <script src="Scripts/bootstrap.min.js"></script>

</body>

</html>

这个button可以正常打开模态框
<button type="button" class="btn btn-primary btn-lg form-inline" data-toggle="modal" data-target="#mymodal-data">查询</button>
这个asp:button打开模态框后闪退
<asp:Button type="button" class="btn btn-primary btn-lg form-inline" data-toggle="modal" data-target="#mymodal-data" runat="server" Text="查找" ID="Button1" OnClick="Button1_Click" />

经过查找发现是asp:button的OnClick="Button1_Click" 导致了模态框的闪退。

有没兄弟有解决办法？？？

...全文