jQuery: আমি কীভাবে একটি সাধারণ ওভারলে তৈরি করতে পারি?

Question 1

আমি কীভাবে ইউআই ছাড়া jQuery এ একটি সত্যিকারের বেসিক ওভারলে তৈরি করতে পারি?

লাইটওয়েট প্লাগইন কী?

Question 2

একটি ওভারলে হ'ল সহজ ভাষায়, এটি স্ক্রিনে স্থিরdiv থাকে (আপনি স্ক্রোল করেন না কেন) এবং এতে কিছু ধরণের অস্বচ্ছতা রয়েছে।

এটি ক্রস ব্রাউজারের অস্বচ্ছতার জন্য আপনার সিএসএস হবে 0.5:

#overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity: 0.5;
    opacity: 0.5;
    z-index: 10000;
}

এটি আপনার jQuery কোড হবে (কোনও ইউআইয়ের প্রয়োজন নেই)। আপনি কেবল # ওভারলে আইডি দিয়ে একটি নতুন উপাদান তৈরি করতে যাচ্ছেন। ডিআইভি তৈরি করা এবং ধ্বংস করা আপনার যা প্রয়োজন তা হ'ল।

var overlay = jQuery('<div id="overlay"> </div>');
overlay.appendTo(document.body)

জন্য কর্মক্ষমতা কারণে আপনি DIV লুকিয়ে রেখেছি ওয়ানা পারে এবং ব্লক করার প্রদর্শন এবং কেউ সেটিং হিসাবে আপনি তা না প্রয়োজন বা।

আশা করি এটা সাহায্য করবে!

সম্পাদনা: @ ভিটালি যেভাবে এটিকে ভালভাবে লিখেছেন, আপনার ডকটাইপটি পরীক্ষা করে দেখতে ভুলবেন না। তার অনুসন্ধানে মন্তব্যগুলিতে আরও পড়ুন ..

Question 3

এখানে একটি সহজ জাভাস্ক্রিপ্ট একমাত্র সমাধান

function displayOverlay(text) {
    $("<table id='overlay'><tbody><tr><td>" + text + "</td></tr></tbody></table>").css({
        "position": "fixed",
        "top": 0,
        "left": 0,
        "width": "100%",
        "height": "100%",
        "background-color": "rgba(0,0,0,.5)",
        "z-index": 10000,
        "vertical-align": "middle",
        "text-align": "center",
        "color": "#fff",
        "font-size": "30px",
        "font-weight": "bold",
        "cursor": "wait"
    }).appendTo("body");
}

function removeOverlay() {
    $("#overlay").remove();
}

ডেমো:

http://jsfiddle.net/UziTech/9g0pko97/

সংক্ষেপ:

https://gist.github.com/UziTech/7edcaef02afa9734e8f2

Question 4

এখানে একটি সম্পূর্ণ এনপ্যাপুলেটেড সংস্করণ যা কোনও আইএমজি উপাদান যেখানে ওভারলে (একটি শেয়ার বোতাম সহ) যুক্ত করে যেখানে ডেটা-ফটো-ওভারলে = 'সত্য।

জেএসফিডেল http://jsfiddle.net/wloescher/7y6UX/19/

এইচটিএমএল

<img id="my-photo-id" src="http://cdn.sstatic.net/stackexchange/img/logos/so/so-logo.png" alt="Photo" data-photo-overlay="true" />

সিএসএস

#photoOverlay {
    background: #ccc;
    background: rgba(0, 0, 0, .5);
    display: none;
    height: 50px;
    left: 0;
    position: absolute;
    text-align: center;
    top: 0;
    width: 50px;
    z-index: 1000;
}

#photoOverlayShare {
    background: #fff;
    border: solid 3px #ccc;
    color: #ff6a00;
    cursor: pointer;
    display: inline-block;
    font-size: 14px;
    margin-left: auto;
    margin: 15px;
    padding: 5px;
    position: absolute;
    left: calc(100% - 100px);
    text-transform: uppercase;
    width: 50px;
}

জাভাস্ক্রিপ্ট

(function () {
    // Add photo overlay hover behavior to selected images
    $("img[data-photo-overlay='true']").mouseenter(showPhotoOverlay);

    // Create photo overlay elements
    var _isPhotoOverlayDisplayed = false;
    var _photoId;
    var _photoOverlay = $("<div id='photoOverlay'></div>");
    var _photoOverlayShareButton = $("<div id='photoOverlayShare'>Share</div>");

    // Add photo overlay events
    _photoOverlay.mouseleave(hidePhotoOverlay);
    _photoOverlayShareButton.click(sharePhoto);

    // Add photo overlay elements to document
    _photoOverlay.append(_photoOverlayShareButton);
    _photoOverlay.appendTo(document.body);

    // Show photo overlay
    function showPhotoOverlay(e) {
        // Get sender 
        var sender = $(e.target || e.srcElement);

        // Check to see if overlay is already displayed
        if (!_isPhotoOverlayDisplayed) {
            // Set overlay properties based on sender
            _photoOverlay.width(sender.width());
            _photoOverlay.height(sender.height());

            // Position overlay on top of photo
            if (sender[0].x) {
                _photoOverlay.css("left", sender[0].x + "px");
                _photoOverlay.css("top", sender[0].y) + "px";
            }
            else {
                // Handle IE incompatibility
                _photoOverlay.css("left", sender.offset().left);
                _photoOverlay.css("top", sender.offset().top);
            }

            // Get photo Id
            _photoId = sender.attr("id");

            // Show overlay
            _photoOverlay.animate({ opacity: "toggle" });
            _isPhotoOverlayDisplayed = true;
        }
    }

    // Hide photo overlay
    function hidePhotoOverlay(e) {
        if (_isPhotoOverlayDisplayed) {
            _photoOverlay.animate({ opacity: "toggle" });
            _isPhotoOverlayDisplayed = false;
        }
    }

    // Share photo
    function sharePhoto() {
        alert("TODO: Share photo. [PhotoId = " + _photoId + "]");
        }
    }
)();

Question 5

আপনি যদি ইতিমধ্যে jquery ব্যবহার করে থাকেন তবে আমি কেন দেখতে পাচ্ছি না আপনি কেন হালকা ওভারলে প্লাগইন ব্যবহার করতে পারবেন না। অন্যান্য ব্যক্তিরা ইতিমধ্যে jquery এ কিছু সুন্দর লিখেছেন, তাহলে চাকাটি পুনরায় উদ্ভাবন কেন?

Question 6

দয়া করে এই jQuery প্লাগইনটি পরীক্ষা করুন,

blockUI

এটির সাহায্যে আপনি সমস্ত পৃষ্ঠা বা উপাদানকে ওভারলে করতে পারেন, আমার জন্য দুর্দান্ত কাজ করে,

উদাহরণ: একটি ডিভ অবরুদ্ধ করুন: $('div.test').block({ message: null });

পৃষ্ঠাটি অবরুদ্ধ করুন: $.blockUI({ message: '<h1><img src="busy.gif" /> Just a moment...</h1>' }); আশা করি কারও সাহায্য করবে

শুভেচ্ছা

Question 7

ওভারলে দ্বারা আপনি কী এমন সামগ্রীর অর্থ বোঝাচ্ছেন যা বাকী পৃষ্ঠাটি ওভারল্যাপ করে / কভার করে? এইচটিএমএলে, আপনি একটি ডিভ ব্যবহার করে এটি করতে পারেন যা পরম বা স্থির অবস্থান ব্যবহার করে। যদি এটি গতিশীলভাবে উত্পন্ন করার প্রয়োজন হয়, jQuery কেবল পজিশন স্টাইলটি যথাযথভাবে সেট করে একটি ডিভ তৈরি করতে পারে।

Question 8

ওভারলে নিয়ে আপনি কী করতে চান? যদি এটি স্থির থাকে, তবে বলুন, একটি সাধারণ বাক্স কিছু সামগ্রীকে ওভারল্যাপ করে, কেবল CSS এর সাথে পরম অবস্থান ব্যবহার করে use যদি এটি গতিশীল হয় (আমি বিশ্বাস করি এটাকে লাইটবক্স বলা হয়), আপনি ওভারলে অন-চাহিদাটি দেখানোর / আড়াল করতে কিছু সিএসএস-সংশোধনকারী jQuery কোড লিখতে পারেন।