Question

我尝试使用bootstrap中的警报来获取cookie通知。我使用了以下代码：

ssh -i ~/.ssh/huddle-hadoop hadoop@ec2-54-83-79-162.compute-1.amazonaws.com
export IPYTHON_OPTS="notebook" 
~/spark/bin/pyspark --master yarn-client --num-executors 200 --executor-memory 4g

小提琴链接是： http://jsfiddle.net/Nighteyes/fy0w1vLc/

现在我希望在按下关闭按钮后设置cookie。 Cookie会在7天后过期。

有人可以帮我吗？

Nighteyes

Answer 1

对于将来使用 Bootstrap 4 的读者，现在可以使用Toast组件创建Cookie同意标语。这是一个工作示例：

https://codeply.com/p/azCmarhM9X

HTML：

 <ImageView
                android:id="@+id/imageView4"
                android:layout_width="wrap_content"
                android:layout_height="177dp"
                app:srcCompat="@drawable/item1" />

            <TextView
                android:id="@+id/textView11"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/imageView4"
                android:layout_marginTop="19dp"
                android:gravity="center|center_horizontal"
                android:text="Item 1"
                android:textAllCaps="false"
                android:textAppearance="@style/Base.TextAppearance.AppCompat.Large"
                android:textColor="@color/design_default_color_primary_dark"
                android:textColorHighlight="@color/colorPrimaryDark"
                android:textColorLink="@color/design_default_color_primary"
                android:textStyle="bold"
                tools:layout_centerHorizontal="true" />

            <TextView
                android:id="@+id/textView12"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/textView11"
                android:layout_marginTop="16dp"
                android:gravity="center"
                android:text="This is the description of item 1"
                android:textColor="@color/colorAccent"
                android:textStyle="italic"
                tools:layout_centerHorizontal="true" />

            <RatingBar
                android:id="@+id/ratingBar"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/textView12"
                android:layout_gravity="center"
                android:numStars="5"
                android:stepSize="1" />

            <TextView
                android:id="@+id/tvRatingScale"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/ratingBar"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:textSize="16sp"
                android:textStyle="bold" />

            <TextView
                android:id="@+id/averageRating"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_below="@id/tvRatingScale"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:textSize="16sp"
                android:textStyle="bold" />

            <EditText
                android:id="@+id/etFeedback"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_below="@id/averageRating"
                android:gravity="top"
                android:hint="add a comment"
                android:inputType="textMultiLine"
                android:lines="5" />

            <Button
                android:id="@+id/btnSubmit"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_marginTop="10dp"
                android:background="#e57373"
                android:text="Submit Feedback"
                android:textColor="@android:color/white" />

JavaScript：

<div class="fixed-bottom p-4">
    <div class="toast bg-dark text-white w-100 mw-100" role="alert" data-autohide="false">
        <div class="toast-body p-4 d-flex flex-column">
            <h4>Cookie Warning</h4>
            <p>
            This website stores data such as cookies to enable site functionality including analytics and personalization. By using this website, you automatically accept that we use cookies. 
            </p>
            <div class="ml-auto">
                <button type="button" class="btn btn-outline-light mr-3" id="btnDeny">
                    Deny
                </button>
                <button type="button" class="btn btn-light" id="btnAccept">
                    Accept
                </button>
            </div>
        </div>
    </div>
</div>

Bootstrap cookie consent demo

Answer 2

function ExpireCookie(minutes) {
  var date = new Date();
  var m = minutes;
  date.setTime(date.getTime() + (m * 60 * 1000));
  $.cookie("cookie", "value", { expires: date });
}

在onClick事件中调用此函数。将总分钟放在构造函数（）中。

ExpireCookie(**ADD MINUTES THAT TOTAL WEEK HERE**);

Answer 3

Bootstrap 5 中的 Cookie 通知弹出窗口：

Cookie 通知是在网站或网页中首次访问时出现的一种弹出窗口。因此，我们在 Bootstrap 5 中使用 CSS3 制作了一个很棒的 Cookie 通知弹出用户界面。

demo

警报引导程序与Cookie

3 个答案: