Javascript 如何制作弹出窗口的设计模式

我想开发一个弹出功能（html、css、js）并在网页的任何地方使用它

以下是pop函数：

function pop (options) {
  var mod = function( options ) {
    var that = this;
    this.op = { title: 'new pop' }; // for startup

    for( var option in options ){
      this.op[ option ] = options[ option ];
    };

    this.title = options.title;
    this.build();

    this.remove = function() { // remove this pop
      document.body.removeChild( that.cover );
    };
  };

  mod.prototype.build = function() { // create new pop
    this.cover = document.createElement('div');
    document.body.appendChild( this.cover );
  };

  return new mod( options );
}; // pop

var callpop = pop( { title: 'make a pop' } ); // so i can call
callpop.remove(); // and remove it 

第一个问题，这种设计模式有意义吗

 <SCRIPT TYPE="text/javascript"> 
 function popup(mylink, windowname)
 { 
   if (!window.focus)
   return true; 
   var href; 
   if (typeof(mylink) == 'string') 
   href=mylink; 
   else href=mylink.href;
   window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); 
   return false; 
 }
 </SCRIPT>

popup('autopopup.html', 'ad')

第二个问题，我可以做：

    this.remove = function() { // remove this pop
      document.body.removeChild( that.cover );
      that = undefined; // add this line to make the callpop undefined
    };
    console.log( callpop ); // so i can check if pop is display, than i can remove it by callpop.remove(), and make a new one callpop = pop()

除了给我一个链接，你能给我一些简短的例子吗？非常感谢

更新1:

我只是想知道，如果你得到一份写弹出式窗口函数的工作，你会如何编写它？我的例子有意义吗？

 <SCRIPT TYPE="text/javascript"> 
 function popup(mylink, windowname)
 { 
   if (!window.focus)
   return true; 
   var href; 
   if (typeof(mylink) == 'string') 
   href=mylink; 
   else href=mylink.href;
   window.open(href, windowname, 'width=400,height=200,scrollbars=yes'); 
   return false; 
 }
 </SCRIPT>

popup('autopopup.html', 'ad')

功能弹出窗口（mylink、windowname）
{ 
如果（！window.focus）
返回true；
var href；
if（typeof（mylink）=‘string’）
href=mylink；
else href=mylink.href；
打开（href，windowname，'width=400，height=200，scrollbars=yes'）；
返回false；
}
弹出窗口（'autopopp.html'，'ad'）

由于您使用

javascript

驱动整个弹出流，因此很难在标记端进行修改。最好将

html

保存在

markup

或

模板中。因为在
标记中对显示部件进行编辑更容易

一个很好的例子是
bootstrap
如何管理其模式弹出窗口。看一看。它们完全由标记驱动，事件在页面加载时附加

您可以根据需要自定义此行为，但请尝试在
.js
中保留
javascript
，在
.html
或
.templates
中保留
html

另外，请查看他们的源代码

对于使用model模板，您应该了解如何处理这些场景


更新：
有关基本参考，请参见jsbin中的。和代码

您好，您可以使用此弹出窗口。下面是定制设计的完整示例
弹出窗口


$（文档）.ready（函数（）{
//加载站点时，首先加载popubox
loadPopuBox（）；
$（'#popuboxclose'）。单击（函数（）{
unloadPopupBox（）；
});
$（“#容器”）。单击（函数（）{
unloadPopupBox（）；
});
});
函数unloadPopupBox（）{
//卸载弹出框
$（'弹出框'）.fadeOut（“慢”）；
$（“#容器”）.css({
//这只是为了时尚
“不透明度”：“1”
});
}
函数loadPopuBox（）{
//加载弹出框
$（'弹出框'）.fadeIn（“慢”）；
$（“#容器”）.css({
//这只是为了时尚
“不透明度”：“0.3”
});
返回false；
}
/*弹出框DIV样式*/
#弹出框{
显示：无；
/*藏起来*/
位置：固定；
_位置：绝对位置；
/*internet explorer 6的黑客攻击*/
高度：自动；
宽度：自动；
背景：#FFFFFF；
顶部：150px；
z指数：100；
/*分层（在其他层之上），如果你有很多层：我只是最大化了，你可以自己改变它*/
左边距：15px；
/*附加功能，可以省略*/
边框：2倍实心#ff0000；
填充：15px；
字体大小：15px；
-moz盒阴影：0 5px#ff0000；
-网络工具包盒阴影：0 5px#ff0000；
盒影：0 0 5px#ff0000；
}
#容器{
背景：#d2d2d2；
/*样品*/
宽度：100%；
身高：100%；
}
a{
光标：指针；
文字装饰：无；
}
/*这是为了定位紧密连接*/
#popupBoxClose{
字体大小：20px；
线高：15px；
右：5px；
顶部：5px；
颜色：#6fa5e2；
字号：500；
}

这是一个很酷的弹出窗口
接近
单击链接加载示例弹出窗口
我能理解你对显示部件的意思，但我从来没有玩过bootstrap&angular，所以我真的不明白如何在代码中使用它们的代码。若您能提供一些简短的示例，那个就更好了。@user3769916添加了演示和代码的链接。看一看。在主体内部构建一个空div是一个好主意，可以防止附加弹出式html标记产生任何副作用，谢谢！Sry的家伙，但这不是我要找的。