jquery-confirm弹窗出现子页面JS影响父页面的问题

使用JQuery弹框的时候如果利用content引入新的页面会出现问题

产生问题的原因:父页面JS,直接通过弹框引入content: ‘url:index.html’,会将父页面的样式和脚本替换成子页面的,关闭子页面弹框之后会对父页面的功能产生影响.

---

嵌套iframe
引入url的时候在url外层嵌套<iframe></iframe>标签,将url内容完全独立.使用这种方法将弹框和内容完全分离的方法可以解决该问题,但是页面看起来会不协调,对后续JS传参和button事件也会有影响.

JS.CSS覆盖
因为是父页面的子页面,功能差距应该不会太大,JS和CSS重合度应该比较高.
1.可以采用完全复制父页面引用的JS和CSS到子页面,替换了父页面仍然不会有什么大问题,但是仍可能出现页面嵌套现象
2.可以采用去除掉子页面的所有JS和CSS,让它直接调用父类的CSS和JS,这样问题能够较好的解决

用bootstrap来替代JQuery弹窗
方法一：

html：
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 5px;border-top: solid 7px #3c8dbc;-webkit-animation-name: type-orange;animation-name: type-orange;">
            <div class="modal-header">
                <h4 class="modal-title" id="#"></h4>
            </div>
            <div class="modal-body">
                 <iframe id="##" frameborder="no" style="width:100%"></iframe> 
            </div>
        </div>
    </div>
</div>

js：
$("##").attr("src","xxxxxx");
//弹出
$("#").modal('show');
//关闭 
$("#").modal('hide');

方法二:

html:
<div class="modal fade" id="#" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="border-radius: 5px;border-top: solid 7px #3c8dbc;-webkit-animation-name: type-orange;animation-name: type-orange;">
            
        </div>
    </div>
</div>

js
$("#").modal({  
    remote: "url"  
}); 
//弹出
$("#").modal('show');
//关闭 
$("#").modal('hide');

动态html
也可以直接通过JQuery时间来生成相应的HTML代码,动态生成弹出框来实现此功能.