Question

如何在asp.net mvc中单击“添加到购物车”按钮时创建一个弹出框？弹出框应该有2个按钮“注册”和“登录”，这个按钮应该重定向到注册或登录页面。

我尝试使用模态，但我不确定它是否是正确的选择，这是代码。

                        <a class="shortcode_button" data-toggle="modal" data-target=".firstmodal"> Add to Cart</a>
                        <div class=" modal fade firstmodal">
                            <div class="modal-dialog">

                                <div class="modal-content">
                                    <div class="modal-header">
                                        <button class="close" data-dismiss="modal"> <span>&times;</span> </button>
                                        <div class="modal-title"> MODAL KEME </div>
                                    </div>

                                    <div class="modal-body">
                                        <h4>Don't have an account yet?</h4>
                                    </div>

                                    <div class="modal-footer">
                                        <div class="row">
                                            <div class="col-md-3">
                                                <a href="/Account/Register" class="shortcode_button">Sign Up</a>
                                            </div>
                                            <div class="col-md-9">
                                                <a href="/Account/Login" class="shortcode_button">Log In</a>
                                            </div>
                                        </div>
                                    </div>

                                </div>

                            </div>
                        </div>

Answer 1

你可以使用Jquery pop up，kendo或telerik pop up或fancy pop up。

Answer 2

您可以使用Bootstrap modal或更简单的插件，允许将其与简单的api一起使用，例如BootboxJs：

bootbox.dialog({
  message: "I am a custom dialog",
  title: "Custom title",
  buttons: {
    success: {
      label: "Sign Up",
      className: "btn-success",
      callback: function() {
        Example.show("great success");
      }
    },
    main: {
      label: "Login",
      className: "btn-primary",
      callback: function() {
        Example.show("Primary button");
      }
    }
  }
});

ASP.NET MVC中的弹出框

2 个答案: