показывает div как всплывающее окно в приложении asp.net MVC 4

Question

показывает div как всплывающее окно в приложении asp.net MVC 4

0

У меня есть частичный вид в моем приложении asp.net MVC 4:

   <form class="qty-add" action="#" method="POST">
        <label>Qty:</label>
        <div class="inp-controller">
            <a href="#" class="min">-</a>
            <input type="text" name="qty" readonly="readonly" />
            <a href="#" class="plus">+</a>
        </div>
        <button id="btnAddToCart" type="submit" >+ ADD TO CART</button>
    </form>

и div, который я хочу показать как всплывающее окно:

<div id="dvContents" style="display: none">

<form id="product-options">
    <div class="header">
        <div>Please select the options for your product.</div>
    </div>
    <div class="content">
        <div class="formfield jqtransform clearfix">
            <select>
                <option>Topping</option>
                <option>Vanilla Ice</option>
                <option>Strawbery</option>
                <option>Apple Pie</option>
            </select>
        </div>
        <div class="formfield jqtransform clearfix">
            <select>
                <option>Cake Size</option>
                <option>Size 1</option>
                <option>Size 2</option>
                <option>Size 3</option>
            </select>
        </div>
    </div>
    <div class="footer">
        <a href="#" class="btn btn-orange-2ln"><span>Continue Shopping</span></a>
        <a href="#" class="btn btn-red-2ln"><span>Checkout</span></a>
    </div>
</form>
 </div>

и js вот так:

 $("form.qty-add button").click(function (e) {
        e.preventDefault();

                var skinName = $(this).data('skin');
        var css3Effects = $(this).data('css3effect');
        var effect = $(this).data('effect') || "fade";
        var href = $(this).data('src');
        var width = $(this).data('width') || null;
        var height = $(this).data('height') || null;

    });

Я хочу показать divcontents как всплывающее окно, когда пользователь нажимает кнопку отправки и отправляет форму в метод действия. Как я могу это сделать?

DotnetSparrow 03 май 2014, в 09:44

Источник

0

Вы не можете передать параметр при щелчке пользователя, например, «1», и проверить загрузку DOM на странице, которую вы хотите открыть, используя div, используя ViewBag, или я вас неправильно понял
brykneval 03 май 2014, в 09:42
0

@ brykneval Мне просто нужно скрыть dvContents при загрузке страницы, но показать dvContents как всплывающее окно при нажатии кнопки «Добавить в корзину».
DotnetSparrow 03 май 2014, в 09:54

Теги:

javascript

jquery

asp.net-mvc

asp.net-mvc-4

1 ответ

Ещё вопросы

Вы не можете передать параметр при щелчке пользователя, например, «1», и проверить загрузку DOM на странице, которую вы хотите открыть, используя div, используя ViewBag, или я вас неправильно понял
@ brykneval Мне просто нужно скрыть dvContents при загрузке страницы, но показать dvContents как всплывающее окно при нажатии кнопки «Добавить в корзину».

Oday Fraiwan · Accepted Answer · 2014-05-03T08-54-00.000Z

Сначала вам нужно создать стиль всплывающего div.

<style type="text/css">
    #dvContents
    {
            display: none; /*hide the div initialy*/
        width: 250px; /*set the width of the div*/
        height: 150px;
        border: 1px solid black; /*define a styling border*/
        box-shadow: 0px 0px 7px;
        position: absolute; /*postition the div in center of screen*/
        top: 50%;
        left: 50%;
        margin: -75px 0 0 -125px;
    }
</style>

Во-вторых, напишите эти две функции, чтобы показать и скрыть div, соответственно:

    var showDiv = function (e) {
        e.preventDefault();
        $("#dvContents").show();
    }

    var hideDiv = function (e) {
        e.preventDefault();
        $("#dvContents").hide();
    }

    $("#btnAddToCart").click(showDiv); //Assign the show function to the click event

Это покажет всплывающее окно в центре экрана, когда пользователь нажимает кнопку submit, + ADD TO CART. Я надеюсь, что это помогает. Удачи