party-bid中弹窗和背景的控制问题

   为了答辩，前两天刚回到学校。在此之前，我的party-bid部分还差一个弹窗，就是在竞价报名结束后，跳转到竞价结果页面，同时弹出一个竞价结果弹窗，里面显示出本次竞价的最后成功者和其相关信息，可以手动关闭它，否则在3秒内就自动消失。
   我的第一个尝试是加入了window.open()函数，即

window.open (’page.html’,’newwindow’,’height=100,width=400,top=0,left=0,toolbar=no,menubar=no,scrollbars=no,resizable=no, 
location=no,status=no’)

   参数说明：

window.open 弹出新窗口的命令；
page.html 弹出新窗口的文件名；
newwindow 弹出窗口的名字（不是文件名），可用空 ″代替；
height=100 窗口高度；
top=0 窗口距离屏幕上方的像素值；
left=0 窗口距离屏幕左侧的像素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar,scrollbars 表示菜单栏和滚动栏；
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许

   可这么做确实能弹出来个新页面，这个新页面也必须重新编辑，但这时出现了一个问题：
   为了控制页面内容的动态显示，需要js里写其对应的controller，在routes里配置其路径，程序运行的时候只根据window.open打开窗口，并不能通过已配置的controller和路径，也没有用到$navigate。毕竟我对anjular框架还是不熟悉。所以我放弃了这一解决方案。
   之后的解决方案是在页面中写一个div框作为弹出窗口。我上网搜索了一些解决方案，包括类似的专门提供给用户好用的一些插件包的bootstrap网http://www.bootcss.com/。里面包括各种各样css样式的插件。可我试着下载了两个插件包，都是关于弹窗的可是效果不怎么理想。
   最后找到的解决方案是bootstrap-modal ，译为模态对话框，也就是带遮罩层的对话框。要显示页面中加入div弹出框的代码：

<div class="modal hide fade">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

   遮罩层haml代码为：
  

%div(id="pop_out_background" class="modal-backdrop fade in" )

   为了控制这两个部件的从显示变为隐藏，需要js的controller中改变他们的class，(ps:这两个样式都在bootstrap中，需要引用)。就是把两个class中的 in去掉成为的样式。我感到这很好用，直接想到的解决方式有两种：
   1、用angular-js中ng-class的方法 利用函数返回不同的样式
   2、直接用的document.getelementaryById()的方式直接修改其样式
   如果用第一种方式，就需要传参数，方便一点的是在函数中调用localstorge.getItem   可在定义关闭按钮的时候还要设置此参数，这就涉及参数的即时更新问题，代码会比较繁琐。因此我决定采用第二种方式。
   就在我满心欢喜，觉得没问题，可以完成pary-bid所有功能的时候，出现了一个大的问题，就是在关闭出现的遮蔽框和div框后，本应该能操作的页面（里面包括的返回或列表按钮）不能点击或使用。我瞬间明白这是因为，出现遮蔽框后，背后的页面也同时失效了。这已经不能通过仅仅改变样式来解决问题了。
   没办法，我只能暂时把遮蔽框删掉，保留了div框，虽然能满足功能需求，但是却不是最完美的表现形式。这个问题只能有待解决，请教各位大神了。

评论

4 楼 zhangfortune 2013-11-07  

sunwenpeng 写道

zhangfortune 写道

大神谈不上，但是bootstrap有给出让modal消失和隐藏的方法。
http://v3.bootcss.com/javascript/#modals

.

木有

3 楼 sunwenpeng 2013-11-06  

zhangfortune 写道

大神谈不上，但是bootstrap有给出让modal消失和隐藏的方法。
http://v3.bootcss.com/javascript/#modals

别谦虚噻 2哥 

2 楼 sunwenpeng 2013-11-06  

zhangfortune 写道

大神谈不上，但是bootstrap有给出让modal消失和隐藏的方法。
http://v3.bootcss.com/javascript/#modals

.

1 楼 zhangfortune 2013-11-03  

大神谈不上，但是bootstrap有给出让modal消失和隐藏的方法。
http://v3.bootcss.com/javascript/#modals