پنجره پاپ آپ با جی کوئری

میتونید از sweetalert استفاده کنید که یک پلاگین jquery هست و امکانات خوبی داره و قشنگه که اینجا راهنماش هست و پیش نمایش و طریقه استفادش هست. البته گزینه های زیادی دارید که اینجا چند تاش هست: لینک

در مورد sweetalert من در فایل example نگاه کردم فقط اینا لینک شده بود:

  <link rel="stylesheet" href="example/example.css">
  <script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

   <!-- This is what you need -->
  <script src="dist/sweetalert-dev.js"></script>
  <link rel="stylesheet" href="dist/sweetalert.css">
  <!--.......................-->

که اثری از بوت استرپ که گفتید نیست.

چند تا اسکرین شات:

برای customize کردن بله میشه برای theme به این صورت مثلا برای تم تویت.ر :

<link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
<link rel="stylesheet" type="text/css" href="themes/twitter.css">

اگه سمپلش رو دانلود کنید یه تم example هم درست کرده که با دیدن اون میتونید ایده بگیرید و کاستم کنید

بله تغییر سایز امکان پذیره. اگر فایل sweetalert.css رو باز کنید :

 .sweet-alert {
  background-color: white;
  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  width: 478px;
  padding: 17px;
  border-radius: 5px;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 50%;
  margin-left: -256px;
  margin-top: -200px;
  overflow: hidden;
  display: none;
  z-index: 99999; }

اگر شما width رو تغییر بدید عرض تمام پنجره ها هم تغییر میکنه اما ارتفاع بیشتر با توجه به محتویاتش تغیر میکنه.

چیزی که نیاز داشید رو براتون ساختم :

<button id ="heyyyyy">Try me!</button>

document.querySelector('#heyyyyy').onclick = function(){
 swal({
  title: "Are you sure?",
  text: "<div style=\"color:red;height:100px;overflow-y:scroll;\" >You will not be able to recover this imaginary file sdfjh sdfgj ksdjfg dfjg dlkf gjl;sfdjg sdlkjf l;sdgj sdfgh sdjfgh dfuigy dugh fdjksh jkgdfh gjgh jdfkgh sdfjh s dfy sjkdf hsgh dfjksh adfujghkjsd ghfjk hjksh dfjkl hgjk lshdfjkghsdlgjksdhfgjklsgsgh ljkf ghsdkljgh dsljkfgh dskjfg hkjdfg bvxcnbv sdfhkgvhkxfg,ksdnfhkxfgjdh fgjkxcbnvxhbjv xch !</div>",
  // type: "warning",
  showCancelButton: false,
  showConfirmButton:false,
  html : true,
  closeOnConfirm: true
 });
};

سلام دوباره

میخواستم کمک کنید درباره همین دیالوگ ها

میخوام به صورت سفارشی دیالوگی رو طراحی کنم که هم سبک باشه و هم سفارشی ممنون میشم ساختارشو بگید و اینکه چجوری انیمیشن های مختلف میشه داد و استایل متفاوت