.NET, MVC框架下利用html, CSS,js实现弹出窗口

在前端UI交互过程中，经常会碰到需要弹出对话框的情况。通过html+css+js来自定义对话框是一个不错的方法。

 

1. 在HTML中，定义一个DIV.

1.1 将Style设置为 display:none. 该对话框默认为不显示。

1.2 制作两个Div按钮。 btnairconfirm, btncancel. 为自定义确定，取消按钮。

1.3 给确定按钮绑定onclick事件。利用js函数实现事件。本例中为RedirectBusinessTravel。通过该函数可以将事件提交至MVC后台（C#代码的controller）。

       

           

温馨提示

           

这是一个例子。您可以在这里写一些提示语。

           

确定

           

取消

       

 

 

2. 在CSS中，定义样式。

2.1 popupHe2可定义为固定位置的样式。z-index:300保证其能够显示在上层。position设置为fixed实现遮罩的功能。

2.2 cpopup在popupHe2中利用百分比模式进行布局。z-index:200表示其在popupHe2的下层。

2.3 cpopup里面的标签title, p, btnairconfirm, btncancel相应进行布局。

.popupHe2 { position: fixed; left: 0; right: 0; top: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.72); z-index: 300; }

.cpopup { position: absolute; top: 50%; left: 10%; right: 10%; margin-top: -1.62rem; text-align: center; background-color: #fff; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; padding: 0.2rem 0; z-index: 200; }

.cpopup .title { font-size: 0.32rem; line-height: 1; color: #333; }

.cpopup p { padding: 0.2rem 5% 0; font-size: 0.24rem; color: #666; line-height: 1.5; text-align: left; }

.cpopup .btnairconfirm { margin: 0.3rem auto auto; font-size: 0.28rem; line-height: 2.5; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; border: 1px solid #0369a6; width: 1.5rem; background-color: #0369a6; color: #fff; }
.cpopup .btncancel { margin: 0.3rem auto auto; font-size: 0.28rem; line-height: 2.5; -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; border: 1px solid #ccc; width: 1.5rem; background-color: #ccc; color: #fff; }

 

3. 利用JS + Ajax进行提交。

3.1 参数中的_url为对应的后台controller位置。首先利用AJAX将请求post到后台。

3.2 若成功，后台返回重定向URL, 则可以通过window.open打开新页面。至此，用户通过点击确认按钮，就实现了跳转打开新页面的需求。

       

 

4. 窗口的显示与隐藏

假设页面HTML中有一个机票按钮，class为airbook.

           4.1 为airbook添加click事件。 当触发click时，将popupHe2的display属性改变，使其显示。

           4.2 为btnairconfirm和btncancel添加事件。当触发click时，将popupHe2的display属性改变，使其隐藏。

         

               
                   

                   

机票

               
           

 

       

 

          $('.btnairconfirm').click(function () {
              $('.popupHe2').css({ display: 'none' });
          });

 

          $('.btncancel').click(function () {
              $('.popupHe2').css({ display: 'none' });
          });