美文网首页
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