Pham_loi: Bài viết này, chúng ta sẽ tạo một box đăng nhập

Home · Bang hội ·
Đăng Nhập hoặc Đăng Kí để sử dụng hết chức năng của diễn đàn.

Hi, Khách!

Bang hội » Wapmaster » JohnCMS » » Xem bài viết

Tìm kiếm

Pham_loi

Chức vụ:

03:47:41, 11-06-2016

Bài viết này, chúng ta sẽ tạo một box đăng nhập đơn giản, sử dụng HTML, CSS và jQuery.

Code html bao gồm 2 thành phần cơ bản:

Tạo một button để khi click vào thì form đăng nhập được show ra:
Chèn code này vào chỗ muốn hiện nút đăng nhập,để trong head hoặc mainmenu cũng được.

<a class="login-window button" href="#login-box">Đăng nhập</a>
<div id="login-box" class="login">
  <p class="login_title">
    Đăng nhập
  </p>
  <a href="#" class="close">
    <img src="/theme/web/dialog/images/close.png" class="img-close" title="Close Window" alt="Close" />
  </a>
  <form action="/login.php" class="login-content" method="post">
    <label class="username">
      <span>
        Tên tài khoản
      </span>
      <input type="text" name="n" value="" maxlength="28" size="5" class="name">
    </label>
    <label class="password">
      <span>
        Mật khẩu
      </span>
      <input type="password" name="p" maxlength="25" size="5" class="pass">
    </label>
    <input type="hidden" name="mem" value="1" checked="checked">
    <input style="color: rgb(255, 255, 255);background: #85B561;padding: 1px;margin: 1px;width: 100px;height: 34px;font-weight: bold;" type="submit" value="Đăng nhập">
    <p>
      <a class="forgot" href="/users/skl.php?continue">
        Quên mật khẩu?
      </a>
    </p>
  </form>
</div>

Tiếp theo bạn tìm trong head.php code này thêm vào bên trên nó
Tiếp theo tải code bên dưới up vào thư mục theme/web và giải nén ra
thế là xong rồi đó

Tải xuống dialog-johncms-by-gocpho-biz.zip (3.85 KB)

↓ Tập tin đính kèm ↓

Vui lòng Đăng Nhập để có thể tải file
dialog-johncms-by-gocpho-biz.zip
Thể loại: application/zip
Dung lượng: 3.85KB

Chỉnh sửa lúc 2016-07-31 09:18 bởi Pham_loi

: 0 ♥

Trực Tuyến: Khách: 1

Diễn đàn teen Việt Nam
CopyRight 2014

Tag:
Bạn đến từ:
Share:

Gọi admin | SMS admin
Facebook:Nhox Attend

Thanks To:XtGem

Liên kết:
Tool tiện ích admin,KhoGame360,Blog thủ thuật,kenh380
,truyen23h
,tai hinh nen naruto,kenhpro - wap hay,vmt - wap hay, Trần Phú Hiền Blog
↑↑lên đầu trang↑↑

Log in