在网格链接按钮中调用html模态表单

本文关键字：html 模态 表单 调用 网格 链接 按钮 | 更新日期: 2023-09-27 18:03:50

我试图在网格链接按钮上调用html模态表单，但无法这样做。通常情况下，html模态表单是这样命名的

<a href="#fModal" role="button" class="btn btn-default" data-toggle="modal">Modal form</a>

模态形式代码:-

<div class="modal fade" id="fModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>                        
                    <h4>Modal form</h4>
                </div>
                <div class="modal-body modal-body-np">
                    <div class="row">
                        <div class="block-fluid">
                            <div class="row-form clearfix">
                                <div class="col-md-3">First name:</div>
                                <div class="col-md-9"><input type="text" value=""/></div>
                            </div>            
                            <div class="row-form clearfix">
                                <div class="col-md-3">Last name:</div>
                                <div class="col-md-9"><input type="text" value=""/></div>                    
                            </div>                                    
                            <div class="row-form clearfix">
                                <div class="col-md-3">About:</div>
                                <div class="col-md-9"><textarea></textarea></div>
                            </div>                                                
                        </div>                
                        <div class="dr"><span></span></div>
                        <div class="block">                
                            <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet.</p>
                        </div>
                    </div>
                </div>   
                <div class="modal-footer">
                    <button class="btn btn-warning" data-dismiss="modal" aria-hidden="true">Save updates</button> 
                    <button class="btn btn-default" data-dismiss="modal" aria-hidden="true">Close</button>            
                </div>
            </div>
        </div>
    </div>

请建议我如何做到这一点，因为我想把它放在网格做显示模型表单在编辑模式与一些数据从数据库获取基于commanddocument。

在网格链接按钮中调用html模态表单

考虑到Bootstrap v2.3+，您应该使用data-target="#fModal"而不是href="#fModal"，如下所示:

<a href="javascript:void(0);" role="button" class="btn btn-default" data-toggle="modal" data-target="#fModal">Modal form</a>
相关文章：