স্ট্যাক ওভারফ্লোতে পপআপ বার্তাটি কীভাবে প্রদর্শিত হবে

Question

আমি লগইন না থাকাকালীন স্ট্যাক ওভারফ্লোতে প্রদর্শিত একটি পপআপ বার্তা যুক্ত করতে চাই এবং আমি ভোটদান বোতাম ব্যবহার করার চেষ্টা করি।

এটি অর্জনের জন্য সর্বোত্তম পদ্ধতি কী? এটি কি জ্যাকুরি লাইব্রেরি ব্যবহার করে করা হয়েছে?

Comments

উত্স দেখুন!

— জোশ স্টোডোলা

নেই অনুরূপ প্রশ্ন। আপনি এটিও পরীক্ষা করতে চাইতে পারেন।

— শোভন

আমি এটি করেছিলাম, এবং এটি মনে হয়েছিল বলে মনে হয়েছে প্রশ্ন.মিন.জেএসস আমি সেই প্লাগইনটি খুঁজে পাইনি তাই আমি প্রশ্নটি জিজ্ঞাসা করেছি

— পুনেতে

দোজোর একটি আপগ্রেডবার রয়েছে যা এটি করে: trac.dojotoolkit.org/browser/branches/1.6/dojox/widget/… trac.dojotoolkit.org/browser/branches/1.6/dojox/widget/…

— mwilcox

Answer 1

সম্পাদনা : নীচের কোডটি দেখায় যে কীভাবে পর্দার শীর্ষে প্রদর্শিত বারগুলি প্রতিলিপি করা যায় যখন আপনি একটি নতুন ব্যাজ পাবেন, প্রথমে সাইটে আসুন ইত্যাদি। আপনি যখন খুব দ্রুত মন্তব্য করার চেষ্টা করবেন তখন পেয়ে যাবেন এমন সংলাপগুলির জন্য, ভোট দিন আপনার নিজের প্রশ্ন ইত্যাদির জন্য, এই প্রশ্নটি দেখুন যেখানে আমি এটি কীভাবে করব বা কেবল উদাহরণে সরাসরি যাব ।

---

এখানে স্ট্যাকওভারফ্লো এটি কীভাবে করে:

এটি মার্কআপ, প্রাথমিকভাবে লুকানো তাই আমরা এটিকে বিবর্ণ করতে পারি:

<div id='message' style="display: none;">
    <span>Hey, This is my Message.</span>
    <a href="#" class="close-notify">X</a>
</div>

এখানে প্রয়োগ করা শৈলীগুলি:

#message {
    font-family:Arial,Helvetica,sans-serif;
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    z-index:105;
    text-align:center;
    font-weight:bold;
    font-size:100%;
    color:white;
    padding:10px 0px 10px 0px;
    background-color:#8E1609;
}

#message span {
    text-align: center;
    width: 95%;
    float:left;
}

.close-notify {
    white-space: nowrap;
    float:right;
    margin-right:10px;
    color:#fff;
    text-decoration:none;
    border:2px #fff solid;
    padding-left:3px;
    padding-right:3px
}

.close-notify a {
    color: #fff;
}

এবং এটি জাভাস্ক্রিপ্ট (jQuery ব্যবহার করে):

$(document).ready(function() {
    $("#message").fadeIn("slow");
    $("#message a.close-notify").click(function() {
        $("#message").fadeOut("slow");
        return false;
    });
});

এবং voila। আপনার পৃষ্ঠা সেটআপের উপর নির্ভর করে আপনি বডি মার্জিন-টপ ডিসপ্লেতে সম্পাদনা করতেও পারেন।

এখানে এটি কার্যকর একটি ডেমো।

Comments

প্রশ্নটি পুনরায় পড়তে আমি মনে করি না এটি ওপি চেয়েছিল। আমি মনে করি তিনি যে বাক্সগুলি যা কিছু করেন না কেন কাছাকাছি সাইটের চারপাশে বিজ্ঞপ্তি হিসাবে প্রদর্শিত হয় সন্ধান করছেন। আমার ধারণা আমি এটিকে যাইহোক ছেড়ে দেব।

— পাওলো বার্গান্টিনো

পাওলো, এটি ছেড়ে দেওয়ার জন্য ধন্যবাদ! আমি মনে করি এটি এই ক্রিয়াকলাপের জন্য আমি যা ব্যবহার করছি তার থেকে এটি কিছুটা ভাল কাজ করতে পারে।

— জয়রোক্স

উত্তরটি না হলেও সমান সহায়ক: পি

— rball

আপনি এক্সটি ক্লিক করার সময় আপনার একটি কুকিও সেট করতে হবে যাতে আপনি আরও পৃষ্ঠাগুলিতে যাওয়ার সময় এটি প্রদর্শিত না হয়।

— অসন্তুষ্ট গোয়াট

আমি আশা করি আমিও একটি উত্তর তারাতে পারে। এই দুর্দান্ত প্রবেশের জন্য ধন্যবাদ!

— ধামা ধরা

Answer 2

এছাড়াও জিকুয়ারি ইউআই ডায়ালগ চেকআউট করুন

Answer 3

আমি jqModal ব্যবহার করি , সহজেই ব্যবহার করা যায় এবং আপনি কিছু দুর্দান্ত প্রভাব অর্জন করতে পারেন

Answer 4

এজেএক্স নিয়ন্ত্রণ সরঞ্জামকিটটিতে মডেলপপআপ ব্যবহার করা আপনি এই প্রভাবটি পেতে পারেন way

Comments

দয়া করে ডাউনটাতে মন্তব্য করুন, মূল প্রশ্নটি যা জিজ্ঞাসা করেছে তার জন্য একটি মডেল পপআপ ব্যবহার করা পুরোপুরি বৈধ।

— patjbs

Answer 5

স্ট্যাকওভারফ্লো উত্সটি দেখে যা পেয়েছি তা এখানে। আশা করি কারও জন্য কিছুটা সময় সাশ্রয় করেছেন। এই সমস্ত পপআপ বার্তাগুলির জন্য শোনোটিকেশন ফাংশন ব্যবহৃত হয়।

var showNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg)};
var showFadingNotification=function(jClicked,msg){master.showErrorPopup(jClicked.parent(),msg,true)};

//master...
showErrorPopup: function (e, h, f) {
    var g = $('<div class="error-notification supernovabg"><h2>' + h + "</h2>" + (f ? "" : "(click on this box to dismiss)") + "</div>");
    var i = function () {
        g.fadeOutAndRemove()
    };
    $(e).append(g);
    g.click(i).fadeIn("fast");
    setTimeout(i, (f ? Math.max(2500, h.length * 40) : 1000 * 30))
}

CSS

.error-notification{z-index:1;cursor:pointer;display:none;position:absolute;padding:15px;-moz-box-shadow:2px 2px 5px #000;-webkit-box-shadow:2px 2px 5px #000;box-shadow:2px 2px 5px #000;}
.error-notification a{color:inherit;text-decoration:underline;}
.error-notification li{font-size:110%;padding-top:3px;}
.supernovabg{color:#fff !important;background-color:#fe7a15 !important;}

বিবর্ণ সময়সীমা সেট করতে তারা কীভাবে বার্তার দৈর্ঘ্যটি ব্যবহার করে তা দুর্দান্ত। আমি বুঝতে পারি না যে সমস্ত (অ-বিবর্ণ শৈলী) বার্তা 30 সেকেন্ডের পরে আসলে বিবর্ণ হয়ে যায়।

Answer 6

বুটস্ট্র্যাপ পরীক্ষা করুন । কিছু পপ আপ প্রভাব, মোডাল, স্থানান্তর, সতর্কতা, সবকিছু উপর ভিত্তি করে আছে javascriptএবং css।