带有地址栏和标题字符串的模态窗口

Question

我试图创建一个新的模态窗口。但它显示一个地址栏，标题显示为 about：blank。代码显示@http://jsfiddle.net/visibleinvisibly/vhudmz5u/

<button id="mydiv" onclick="myFunction( )"> The content</button>
<script>
function myFunction() {  
 var childWin = window.open ("about:blank", "MyWindow", "height=150,width=200");
     childWin.document.body.innerHTML = "<span style='color:red'>Hello World!</span>";
}
</script>

我想在IE11中我们无法隐藏地址栏。如果您对如何设置模式弹出窗口的标题有任何想法，请告诉我。

提前致谢亚历克斯

Answer 1

如果您想完全控制模态窗口，最好创建自己的模式窗口。这个想法是在页面和创建的div 之间创建一个div（"模态窗口"框）和一个灰色的背景层。这个jsFiddle为此提供了一些代码。它使用 jQuery。中心功能是：

function createModalBox(html,useCloser){
    var box = $('#modalbox').length
                ? $('#modalbox')
                : $('<div id="modalbox"></div>').appendTo('body');
    var back = $('#modalback').length
                ? $('#modalback')
                : $('<div id="modalback"/>').appendTo('body');
    box.html(html);
    if (useCloser){
        $('<div id="modalclose" class="closer"/>').appendTo(box).show();
    }
    back.show();
    setTimeout(function(){box.fadeIn(); center(box[0]);},100);
    if (!back.attr('data-handled')){
        var f = function(){
            $('#modalback, #modalbox').fadeOut();
            $('#modalbox').remove();
        };
        $('body').on('click','#modalclose',f);
        back.attr('data-handled', true);
    }
}