bootstrap-modal

how to pass data-attribute in modal

由 China☆狼群 提交于 2019-12-07 07:51:31
问题 I need to pass the data attribute in my modal. to attach with image tag in src When clicked on the link. Below is my code. I am confused. I know we can use JavaScript onclick method to pass by reference. Still can anyone give me executable code. My code is below. I am not really good in making JavaScript functions. <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Expression has changed error on Opening a Modal Popup inside a component

由 白昼怎懂夜的黑 提交于 2019-12-07 07:03:16
问题 I have a parent component and i am passing some HTML from it to a child common component using @ViewChild(). When Child component loads up a popup. Console throws below error. "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ngIf: undefined'. Current value: 'ngIf: this is description'. It seems like the view has been created after its parent and its children have been dirty checked. Has it been created in a change detection hook ?" I

tinymce in bootstrap modal: wrong dropdown position on scroll

由 一个人想着一个人 提交于 2019-12-07 06:28:44
问题 I'm using tinymce inside a bootstrap modal but I'm having a problem with tinymce dropdowns on page scroll: basically their absolute positions are not updated and they are shown in the wrong position. I prepared a jsbin to show the problem: just open the color picker and scroll the page. Any hints? Anyone had the same issue and managed to make it work? Thanks 回答1: In addition to user206056 css answer: .mce-menu {position:fixed !important} try adding to your TinyMCE init method, adding the ui

Chosen dropdown list not working with Modal

由 夙愿已清 提交于 2019-12-07 05:32:14
问题 I am trying to get a jQuery Chosen select / dropdown list to work in a Bootbox modal. I have almost the same exact code working on a standard HTML page, so I thought it would be straight forward to just pop my list into a modal. I generate my divs and select objects in the modal, and then after it is "shown", I call Chosen: div.on("shown", function() { $(".chzn-select").chosen(); $(".chzn-select-deselect").chosen({allow_single_deselect:true}); myApp.init(); }); After this, Chosen seems to be

Enable button when scroll bootstrap modal to bottom

由 瘦欲@ 提交于 2019-12-07 03:47:57
问题 I want to force the user to read all the agreement inside the modal. The idea is simple, if they don't scroll to the last line of the text. The button still disable. But the button is not enable. This is my code: Javascript: $('#agreement').scroll(function () { if ($(this).scrollTop() == $(this)[0].scrollHeight - $(this).height()) { $('#closeBtn').removeAttr('disabled'); } }); As for the clearer picture. I put the code in js here : http://jsfiddle.net/h3WDq/1129/ This is an update version

bootstrap datetimepicker does not work in a bootstrap modal

由 ↘锁芯ラ 提交于 2019-12-07 01:54:26
I need to use bootstrap datetimepicker in a bootstrap modal. I've successfully used it in a normal web page. The bootstrap calender won't open in the modal. Here is my dynamically generated html code. '<div class="col-xs-12">'+ '<div class="col-xs-4">'+ '<div class="form-group">'+ '<label for="editStartTime">Start Time </label>'+ '<div class="input-group date" id="editStartTime">'+ '<input type="text" class="form-control" value="'+startTime+'"/>'+ '<span class="input-group-addon">'+ '<span class="glyphicon glyphicon-calendar"></span>'+ '</span>'+ '</div>'+ '</div>'+ '</div>' This is the jquery

Fullcalendar: Bootstrap Modal Box not displaying elements correctly

由 荒凉一梦 提交于 2019-12-07 00:33:27
A Full calendar Script in one of my project in which i added a Bootstrap modal. I am making it to popup on submit of a Button in my page.But the elements inside the modal are not visible clearly. where am i making the mistake?. I do have a datepicker in my code, but it is also not displayed with proper 'prev','next' buttons. I have added a sample pic too.Kindly help me.. The following is my code:- <div class="modal fade in" id="modal_calendar" tabindex="-1" role="dialog" aria-hidden="false" style="display: block;"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header

Bootstrap 3 Modal Event (Hidden.Bs.Modal) Keeps Repeating

由 别来无恙 提交于 2019-12-07 00:24:27
I have 6 images that load in different 6 different modal windows and they each have a next button and also a close button in them. The next button works with the following jquery code: $('#nextModal12').click(function() { $('#featuresModal1').modal('hide'); $('#featuresModal1').on('hidden.bs.modal', function () { $('#featuresModal2').modal('show'); document.getElementById('#featuresModal1').style.display="none"; }); }); $('#nextModal23').click(function() { $('#featuresModal2').modal('hide'); $('#featuresModal2').on('hidden.bs.modal', function () { $('#featuresModal3').modal('show'); document

Bind the closing of a first modal to the opening of a second modal

由 谁都会走 提交于 2019-12-06 16:39:57
So when the first modal (this.$avatarModal) is closed, I would like a second modal (this.$modaldata) to open.: The following sequence works however there are issues with the scrolling of the second modal not functioning: this.$avatarModal.modal('hide'); this.$modaldata.modal('show'); As a solution to the scrolling issue, the dev on github are recommending to bind the event. However the following code, using .on does not work (the second modal does not open. this.$avatarModal.modal('hide'); this.$avatarModal.on('hidden.bs.modal', function () { this.$modaldata.modal('show'); }); However, If i

Several Modal Images on page

由 旧街凉风 提交于 2019-12-06 15:57:59
问题 I'm new with JS, I'm trying to use 2 modal images on same page with this code: https://www.w3schools.com/howto/howto_css_modal_images.asp With this HTML, JS and CSS view resizing works only for one image, not sure how to make it work for two images on same page: I have first html code two times for each image: HTML: <img id="myImg" src="img_fjords.jpg" alt="Trolltunga, Norway" width="300" height="200"> <div id="myModal" class="modal"> <span class="close">×</span> <img class="modal-content" id
订阅 bootstrap-modal