الخميس، 23 نوفمبر 2017

احصل على هذة الاداة من هنا

صندوق منبثق قابل للسحب وتغيير الحجم



السلام عليكم ورحمة
الله وبركاته
--
نعود لكم بتدوينة جديدة نقدم لكم فيها صندوق منبثق يمكنك سحبه وتغيير حجمه كما تشاء




طريقة التركيب:

    1. توجه الى القالب ثم تحرير html
    2. ضع الكود التالي في المكان الذي يناسبك
  <button id="button" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">افتح</button>

  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">

      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title">issamweeb</h4>
          <button type="button" class="close" data-dismiss="modal">&times;</button>
        </div>
        <div class="modal-body" style="">
          <p>هناك حقيقة مثبتة منذ زمن طويل وهي أن المحتوى المقروء لصفحة ما سيلهي القارئ عن التركيز على الشكل الخارجي للنص أو شكل توضع الفقرات في الصفحة التي يقرأها.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">اغلاق</button>
        </div>
      </div>
      
    </div>
  </div>

      1. ابحث عن </body> وضع فوقه الكود التالي
    <script type='text/javascript'>                                        $('#myModal').on('show.bs.modal', function (e) {
      var anim = $('#entrance').val();
           $('.modal .modal-dialog').attr('class', 'modal-dialog  ' + 'fadeInUpBig' + '  animated');
    })
    $('#myModal').on('hide.bs.modal', function (e) {
      var anim = $('#exit').val();
           $('.modal .modal-dialog').attr('class', 'modal-dialog  ' + 'fadeOutDown' + '  animated');
    })
    
    $('.modal-content').resizable({
        //alsoResize: ".modal-dialog",
        minWidth: 320
    });
    
    $('.modal-dialog').resize(function() {
      $('.modal-dialog').css("max-width", "90vw");
    });
    
    $('.modal-content').draggable();
    
    $('.modal-content').on('show.bs.modal', function () {
        $(this).find('.modal-body').css({
            'max-height':'100%'
        });
    });
    </script>
    

      1. ابحث عن ]]></b:skin> وضع فوقه الكود التالي
    /**
    by issamweeb
    */
    
    .btn { cursor: pointer; background: #eaeaea; color: #323232; border: 0px solid transparent; margin: 16px; } .btn:hover { color: #323232; background: #aeaeae; } .btn:active { color: #323232; background: #aeaeae; border: 0px solid transparent; } .modal-open { overflow-y: hidden; } .modal-dialog { display: flex; align-items: center; width: 50%; height: 100%; min-width: 320px; max-width: 640px; margin: 0px auto; animation-duration: 0.25s; animation-delay: 0s; } .modal-content { max-height: 90%; } .modal-header { height: 64px; flex-shrink: 0; background: #eaeaea; border-radius: 5px 5px 0px 0px; cursor: move; } .modal-footer { height: 64px; flex-shrink: 0; background: #eaeaea; border-radius: 0px 0px 5px 5px; } .modal-body { height: 100%; overflow-y: scroll; } .ui-resizable-s { bottom: 0; } .ui-resizable-e { right: 0; } 


      1. ثم ابحث عن </head> وضع الاكواد التالية فوقه
    <script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js'></script>
    <script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/js/bootstrap.min.js'></script>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css' type='text/css'/>
    <link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css' type='text/css'/>


    EmoticonEmoticon