.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）。

<div class="popupHe2" style="display:none;">

        <div class="cpopup">             <div class="title">温馨提示</div>             <p>这是一个例子。您可以在这里写一些提示语。</p>             <div class="btnairconfirm" οnclick="RedirectBusinessTravel('@Url.Action("FlightHomePage", "Home")')">确定</div>             <div class="btncancel">取消</div>         </div>

 </div>

 

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打开新页面。至此，用户通过点击确认按钮，就实现了跳转打开新页面的需求。

        <script>             function RedirectBusinessTravel(_url) {                         $.ajax({                             type: "POST",                             url: _url,                             async: false,                             dataType: 'json',                             contentType: 'application/x-www-form-urlencoded; charset=UTF-8',                             data: {                             },                             success: function (msg) {                                 if (msg.isSuccess == "1") {                                     window.open(msg.url);                                 }                                 else                                     alert(msg.errInfo);                             },                             error: function (msg) {                                 alert("系统繁忙，请稍后再试");                                 return false;                             }                         });                 }         </script>

 

4. 窗口的显示与隐藏

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

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

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

          <div class="enterlist Ltac pure-u-1-3">                 <a class="airbook">                     <div class="bookicon"><i class="icon-travel-air"></i></div>                     <div>机票</div>                 </a>             </div>

 

        <script>             $('.airbook').click(function () {                 $('.popupHe2').css({ display: 'block' });             })         </script>

 

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

 

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