Question

我正在尝试使用Bootstrap向页面添加模态编辑表单。我们的想法是，当用户从网格中选择一个项目时，应弹出一个编辑表单，显示当前值并允许他们进行更改。这是模态形式的代码：

        <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="form-horizontal" id="myForm" role="form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">My modal</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbTitle">Public Title:</label>
                                <div class="input-group col-sm-5">
                                    <input type="text" runat="server" class="form-control required" id="tbTitle">
                                </div>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbInternalTitle">Internal Title:</label>
                                <div class="input-group col-sm-5">
                                    <input type="text" runat="server" class="form-control required" id="tbInternalTitle">
                                </div>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbPrice">Monthly Price:</label>
                                <div class="input-group col-sm-5">
                                    <input type="text" runat="server" class="form-control required" id="tbPrice">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

现在，当我点击＆＃34;编辑＆＃34;在页面上的GridView控件中的一行上按钮，它执行它应该做的事情 - 它检索计划数据并填充表单字段。我知道这一点，因为如果我在点击一个项目后检查页面源代码，这就是我在HTML中看到的内容：

    <div class="container-fluid page-top">
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="form-horizontal" id="myForm" role="form">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title">My modal</h4>
                    </div>
                    <div class="modal-body">
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbTitle">Public Title:</label>
                                <div class="input-group col-sm-5">
                                    <input name="ctl00$cpMain$tbTitle" type="text" id="cpMain_tbTitle" class="form-control required" value="Basic Gold Program" />
                                </div>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbInternalTitle">Internal Title:</label>
                                <div class="input-group col-sm-5">
                                    <input name="ctl00$cpMain$tbInternalTitle" type="text" id="cpMain_tbInternalTitle" class="form-control required" value="BASEPLAN" />
                                </div>
                            </div>
                        </div>
                        <div class="form-group has-feedback">
                            <div class="col-lg-12">
                                <label class="control-label col-sm-3" for="tbPrice">Monthly Price:</label>
                                <div class="input-group col-sm-5">
                                    <input name="ctl00$cpMain$tbPrice" type="text" id="cpMain_tbPrice" class="form-control required" value="$75.00" />
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

但是，正常查看页面并单击＆＃34;编辑＆＃34;按钮，这里是实际出现的屏幕截图：

我不知道为什么表单数据本身并没有出现，但它让我疯了！我似乎没有任何HTML错误（未关闭的标签等），所以我无法追踪到这里发生的事情。有什么帮助吗？

Answer 1

我把你的代码放到一个片段中，它有效......奇怪如果您可以在浏览器的控制台中看到正确的HTML，那么这可能是一个CSS问题您应该尝试设置Log属性以确保...

height

Answer 2

嗯，问题是我打算如何打开模态表单。我不得不使用不同的JavaScript函数来调用它，因为另一个函数工作但在某种程度上是错误的。 Javascript函数是：

ScriptManager.RegisterStartupScript(this, this.GetType(), "Pop", "openModal();", true);

}

并且从服务器端调用它：

{{1}}

我使用的另一个并没有完全正确，尽管模态仍然出现。很奇怪，但它奏效了。感谢您的反馈，伙计们！

我的Bootstrap表单模式表单没有正确显示

2 个答案: