Share mod dialog-Đăng nhập nhanh cho johncms | JohnCMS

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 » Share mod dialog-Đăng nhập nhanh cho johncms

Tìm kiếm

» Share mod dialog-Đăng nhập nhanh cho johncms

Pham_loi

Chức vụ:

17:47:41, 10-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>

Copy code

Tiếp theo bạn tìm trong head.php code này

<?php
"\n" . '</head><body>' . core::display_core_errors();
?<

Copy code

thêm vào bên trên nó

<?php
"\n" . '<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>' .
"\n" . '<link rel="stylesheet" href="' . $set['homeurl' . '/theme/web/dialog/dialog.css" />' .
"\n" . '<script type="text/javascript" src="'.$home.'/theme/web/dialog/dialog.js"></script>' .
?>

Copy code

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-30 23:18 bởi Pham_loi

: 0 ♥

Tổng số: 1

Đăng nhập để trả lời · Cuối cùng

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