جاوااسکریپت - چگونه با استفاده از jQuery یک پنجره بازشوی ساده ایجاد کنیم

من در حال طراحی یک صفحه وب هستم. وقتی روی محتوای div با نام mail کلیک میکنیم، چگونه میتوانم یک پنجره پاپآپ شامل یک برچسب ایمیل و یک جعبه متن نمایش دهم؟

پاسخ شماره ۱

اول CSS - هرطور دوست داری این را تنظیم کن:

a.selected {
  background-color:#1F75CC;
  color:white;
  z-index:100;
}

.messagepop {
  background-color:#FFFFFF;
  border:1px solid #999999;
  cursor:default;
  display:none;
  margin-top: 15px;
  position:absolute;
  text-align:left;
  width:394px;
  z-index:50;
  padding: 25px 25px 20px;
}

label {
  display: block;
  margin-bottom: 3px;
  padding-left: 15px;
  text-indent: -15px;
}

.messagepop p, .messagepop.div {
  border-bottom: 1px solid #EFEFEF;
  margin: 8px 0;
  padding-bottom: 8px;
}

و جاوااسکریپت:

function deselect(e) {
  $('.pop').slideFadeToggle(function() {
    e.removeClass('selected');
  });    
}

$(function() {
  $('#contact').on('click', function() {
    if($(this).hasClass('selected')) {
      deselect($(this));               
    } else {
      $(this).addClass('selected');
      $('.pop').slideFadeToggle();
    }
    return false;
  });

  $('.close').on('click', function() {
    deselect($('#contact'));
    return false;
  });
});

$.fn.slideFadeToggle = function(easing, callback) {
  return this.animate({ opacity: 'toggle', height: 'toggle' }, 'fast', easing, callback);
};

و در نهایت اچتیامال:

<div class="messagepop pop">
  <form method="post" id="new_message" action="/messages">
    <p><label for="email">Your email or name</label><input type="text" size="30" name="email" id="email" /></p>
    <p><label for="body">Message</label><textarea rows="6" name="body" id="body" cols="35"></textarea></p>
    <p><input type="submit" value="Send Message" name="commit" id="message_submit"/> or <a class="close" href="/">Cancel</a></p>
  </form>
</div>

<a href="/contact" id="contact">Contact Us</a>

اینجا یک دموی jsfiddle و پیادهسازی آن است.

بسته به وضعیت، ممکن است بخواهید محتوای پنجرهی بازشونده را از طریق یک فراخوانی آژاکس بارگذاری کنید. بهترین کار این است که در صورت امکان از این کار خودداری کنید زیرا ممکن است باعث شود کاربر قبل از دیدن محتوا تأخیر بیشتری را تجربه کند. در اینجا چند تغییر وجود دارد که اگر این روش را انتخاب کنید، باید انجام دهید.

HTML به صورت زیر تبدیل می شود:

<div>
    <div class="messagepop pop"></div> 
    <a href="/contact" id="contact">Contact Us</a>
</div>

و ایده کلی جاوااسکریپت به این صورت میشود:

$("#contact").on('click', function() {
    if($(this).hasClass("selected")) {
        deselect();               
    } else {
        $(this).addClass("selected");
        $.get(this.href, function(data) {
            $(".pop").html(data).slideFadeToggle(function() { 
                $("input[type=text]:first").focus();
            });
        }
    }
    return false;
});

پاسخ شماره ۲

به جعبه گفتگوی jQuery UI نگاهی بیندازید. شما میتوانید از آن به این شکل استفاده کنید:

jQuery:

$(document).ready(function() {
    $("#dialog").dialog();
});

نشانهگذاری:

<div id="dialog" title="Dialog Title">I'm in a dialog</div>

انجام شد!

به خاطر داشته باشید که این تقریباً سادهترین مورد استفادهای است که وجود دارد، من پیشنهاد میکنم مستندات را بخوانید تا ایده بهتری از اینکه دقیقاً چه کارهایی با آن میتوان انجام داد، به دست آورید.

پاسخ شماره ۳

من از یک پلاگین جیکوئری به نام ColorBox استفاده میکنم، آن است

1. خیلی آسان برای استفاده
2. سبک
3. قابل سفارشیسازی
4. زیباترین پنجره بازشوندهای که تاکنون برای jQuery دیدهام