美文网首页
Bootstrap 模态框(Modal)使用

Bootstrap 模态框(Modal)使用

作者: 熙航君 | 来源:发表于2020-04-17 09:16 被阅读0次

定义一个a标签,通过标签的点击事件调用Modal
<a id="add" class="btn btn-info" onclick="add();">新增</a>

function add(){
    var href = 'appuser/GODMZDADD.do';
    //模态窗口的html字符串
    var modaldiv = '<div class="modal fade" id="myModal"  role="dialog" aria-labelledby="myModalLabel">';
    modaldiv += '<div class="modal-dialog" role="document" style="width:550px;height:250px">';
    modaldiv += '<div class="modal-content">';
    modaldiv +=  '<div class="modal-header"> '
    modaldiv +=  '<button type="button" class="close" data-dismiss="modal" aria-hidden="true"> '
    modaldiv += '</button> '
    modaldiv += '<h4 class="modal-title" id="myModalLabel">'
    modaldiv += '新增代码字典 '
    modaldiv += '</h4>'
    modaldiv += '</div>'
    modaldiv += '<div class="modal-body">'
    modaldiv += '</div> '
    modaldiv += '</div>';
    modaldiv += '</div>';
    modaldiv += '</div>';
    //之前存在模态窗口删除
    if ($("#myModal").size() > 0) {
        $("#myModal").remove();
    }
    //插入新的模态窗口html
    $('form').eq(0).append(modaldiv);
    //初始化模态窗口
    $("#myModal").modal({
        show: false,
        remote: href
    });
    //显示模态窗口
    $('#myModal').modal('show');
}
image.png

点击保存后刷新当前页面
parent.location.reload();

相关文章

网友评论

      本文标题:Bootstrap 模态框(Modal)使用

      本文链接:https://www.haomeiwen.com/subject/ycgsvhtx.html