首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何使用jQuery打开Bootstrap的窗口模式?

如何使用jQuery打开Bootstrap的窗口模式?

提问于 2017-12-12 19:04:36
回答 2关注 0查看 644

我正在使用Twitter Bootstrap模式窗口功能。当有人在我的表单上点击提交时,我想单击表单中的“提交按钮”来显示模式窗口。

代码语言:txt
复制
<form id="myform" class="form-wizard">
代码语言:txt
复制
    <h2 class="form-wizard-heading">BootStap Wizzard Form</h2>
代码语言:txt
复制
    <input type="text" value=""/>
代码语言:txt
复制
    <input type="submit"/>
代码语言:txt
复制
</form>
代码语言:txt
复制
代码语言:txt
复制
<!-- Modal -->
代码语言:txt
复制
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
代码语言:txt
复制
    <div class="modal-header">
代码语言:txt
复制
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
代码语言:txt
复制
        <h3 id="myModalLabel">Modal header</h3>
代码语言:txt
复制
    </div>
代码语言:txt
复制
    <div class="modal-body">
代码语言:txt
复制
        <p>One fine body…</p>
代码语言:txt
复制
    </div>
代码语言:txt
复制
    <div class="modal-footer">
代码语言:txt
复制
        <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
代码语言:txt
复制
        <button class="btn btn-primary">Save changes</button>
代码语言:txt
复制
    </div>
代码语言:txt
复制
</div>
代码语言:txt
复制
代码语言:txt
复制
jQuery的:
代码语言:txt
复制
代码语言:txt
复制
$('#myform').on('submit', function(ev) {
代码语言:txt
复制
    $('#my-modal').modal({
代码语言:txt
复制
        show: 'false'
代码语言:txt
复制
    }); 
代码语言:txt
复制
代码语言:txt
复制
代码语言:txt
复制
    var data = $(this).serializeObject();
代码语言:txt
复制
    json_data = JSON.stringify(data);
代码语言:txt
复制
    $("#results").text(json_data); 
代码语言:txt
复制
    $(".modal-body").text(json_data); 
代码语言:txt
复制
代码语言:txt
复制
    // $("#results").text(data);
代码语言:txt
复制
代码语言:txt
复制
    ev.preventDefault();
代码语言:txt
复制
});

回答

和开发者交流更多问题细节吧,去 写回答
相关文章

相似问题

相关问答用户
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档