.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" onclick="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' });
          });