【问题标题】:Bootstrap modal - popup window not showing引导模式 - 弹出窗口未显示
【发布时间】:2015-02-16 15:36:47
【问题描述】:

我正在使用以下示例 http://www.bootply.com/59864

但是当我单击触发弹出窗口的按钮时,背景变暗但窗口不显示。知道是什么原因造成的吗?我正在使用引导程序 3.2.0

<%@ Page Title="" Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true" CodeFile="CreateWorkbook.aspx.cs" Inherits="CreateWorkbook" %>
<asp:Content ID="Content0" ContentPlaceHolderID="head" runat="Server">
    <script>
        $(function () {
            $('#myFormSubmit').click(function (e) {
                e.preventDefault();
                alert($('#myField').val());
                /*
                $.post('http://path/to/post', 
                $('#myForm').serialize(), 
                function(data, status, xhr){
                // do something here with response;
                });
                */
            });
        });
    </script>
</asp:Content>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">

      
            <div class="row">
                <div class="col-md-12 col-xs-12" style="margin-top: 10px">
                    <a data-toggle="modal" href="#myModal" role="button" class="btn btn-info btn-lg"><span class="glyphicon glyphicon-plus-sign">
                    </span>Add questions</a>
                </div>
            </div>
      <div class="list-group col-md-8" style="margin-top:20px"> <a href="#" class="list-group-item active"> Questions list </a> <a href="#" class="list-group-item list-group-item-info">Q1: Name</a> <a href="#" class="list-group-item list-group-item-info">Q2: Location</a> <a href="#" class="list-group-item list-group-item-info">Q3: Outcome</a> <a href="#" class="list-group-item list-group-item-info">Q4: Next meeting date</a> </div>
      <div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-header">
		<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
			<h3 id="myModalLabel">Modal header</h3>
	</div>
	<div class="modal-body">
		<form id="myForm" method="post">
          <input type="hidden" value="hello" id="myField">
    		<button id="myFormSubmit" type="submit">Submit</button>
		</form>
	</div>
	<div class="modal-footer">
		<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
		<button class="btn btn-primary">Save changes</button>
	</div>
</div>
</asp:Content>

【问题讨论】:

  • 您使用的代码与 bootply 完全相同吗?
  • 是的。我也跟着
  • 能否在问题中包含您的代码?
  • 你的例子是基于 Bootstrap 2.3.1,这里是 Bootstrap 3.3.0 bootply.com/va3EnHE0MJ
  • 谢谢老兄!我会看看,让你知道。

标签: twitter-bootstrap-3 modal-dialog


【解决方案1】:

工作示例基于 Bootstrap 2.3.1,如果您正在导入 Bootstrap 3.3.0,那么工作示例可能是:http://bootply.com/va3EnHE0MJ

【讨论】:

  • 还有一个问题。因为我在 asp.net 中使用这个弹出窗口,所以当我点击保存按钮时,它应该触发点击事件。但它不起作用。有什么想法吗?
  • 尝试使用按钮 type="button" onclick="yourjsfunc();"然后在那个js函数中对表单提交进行编码。
  • 谢谢老兄!我发现了另一种方法。在 asp.net 中,您必须在您的 asp:Button 中使用 UseSubmitBehavior="false"。然后调用代码隐藏文件中的 onClick 方法函数。
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 2021-08-31
  • 1970-01-01
  • 2016-04-25
  • 1970-01-01
  • 1970-01-01
  • 2020-08-01
  • 1970-01-01
相关资源
最近更新 更多