Содержимое всплывающего окна с jquery

У меня есть контент, который сползает вниз при нажатии на заголовок с использованием jquery. Но я хочу открыть всплывающее окно, а не скользя. Я попробовал Google, но не смог (новичок в jquery).Содержимое всплывающего окна с jquery

Так что мой вопрос - то, что лучше всего & Простейший способ всплывающего содержимого (должен поддерживаться во всех/большинстве устройств и браузеров).

<p class="heading" style="background-color:#007BB6; color: #fff !important;"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br><br><img id="bg" src="images/down.png"/> </p> 
    <div class="content" style="background-color:#e5f1f7; text-align:justify;"> 
    <p style="margin-top:0;"> 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent viverra viverra lectus sed feugiat. In rutrum orci sit amet purus dapibus, eget ultricies odio consequat. Aenean semper pretium tellus eget cursus. Sed eget finibus orci. Ut fermentum enim 
    quis quam rhoncus pretium.

Jsfiddle: https://jsfiddle.net/345hxhx7/

ценю помощь!

источник

2016-01-25 Dnyaneshwar

Вы можете использовать окно подтверждения для всплывающего окна. – Avi

Вам нужно будет точно определить, что вы подразумеваете под «всплыванием» в этом случае; как вы можете видеть с вопросом, что это расплывчато, вы получите ответы по всей карте (пока у вас есть гамма из «бросить гигантские библиотеки пользовательского интерфейса в проблему», чтобы «открыть диалог подтверждения») –

У меня есть простое решение jQuery. jsfiddle {{}} Edited

Новый HTML:

<div class="pop_up" data-status="close"> 
    <div class="pop_overlay"></div> 
    <div class="pop_wrapper"> 
     <div class="pop_title"> 
      The Title 
      <span class="pop_close">X</span> 
     </div> 
     <div class="pop_content"> 
      Popup Content will come here; 
     </div> 
    </div> 
</div>

JQuery

jQuery(".heading").click(function() { 
    var this_item = jQuery(this).attr('data-item'); 
    var item_cont = jQuery('#'+this_item).html(); 
    jQuery('.pop_up').fadeIn(); 
    jQuery('.pop_content').html(item_cont); 
    jQuery(".pop_close,.pop_overlay").click(function() { 
     jQuery('.pop_up').fadeOut(); 
    }); 
});

Новый CSS

.pop_up{ 
    display:none; 
} 
.pop_overlay{ 
    position:absolute; 
    left:0; 
    right:0; 
    top:0; 
    bottom:0; 
    background:rgba(0,0,0,.2); 
    position:fixed; 
    } 
    .pop_wrapper{ 
     max-width:450px; 
     margin:auto; 
     box-shadow:0 0 5px rgba(0,0,0,.5); 
     position:relative; 
     z-index:9999; 
     position:fixed; 
     left:0; 
     right:0; 
     top:100px; 
    } 
    .pop_wrapper .pop_title{ 
     padding:10px; 
     background:#fafafa; 
    } 
    .pop_content{ 
     background:white; 
     padding:15px; 
    } 
    .pop_close{ 
     float:right; 
    }

Проверьте мой jsfiddle демо.

источник

2016-01-25 21:22:54

Спасибо lot для solution.Worked как шарм !!! – Dnyaneshwar

Вы можете использовать jQuery UI's Dialog или Boostrap's Modal.

источник

2016-01-25 20:00:38

Посмотрите на jPopup: https://github.com/seahorsepip/jPopup

Поддерживает все браузеры (IE7 +) и мобильный дружественный, что вы хотите, есть возможность для этого. Лоты позиций, изменение смещения, изменение настроек и содержимого даже после всплывания.

источник

2016-01-25 23:58:53 seahorsepip

Содержимое всплывающего окна с jquery

ответ

Смежные вопросы