Show PDF generated from HTML page in bootstrap modal without downloading

Is there any way to generate a PDF file from HTML page/content and the PDF should be shown in bootstrap modal without downloading directly. I tried using jsPDF, but couldn't do as expected. Instead of bootstrap modal its showing in an iframe now. Below is the sample HTML content which is to be converted in to PDF(without downloading) to show in Bootstrap Modal. <body> <Content will be displayed here> </body> Below is the javascript code(jsPDF). <script src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script> <script src='../../dist/jspdf.debug.js'></script> <script> var pdf = new

2021-10-24 00:36:13    分类:问答    javascript   html   pdf   bootstrap-modal   jspdf

How do I open modal using bootstrap 4 by clicking a hyperlinked table cell and populate data in the model from SQL database using the clicked ID

I have a page which displays data from SQL in a table and on that table one cell is hyperlinked and I want a modal (using bootstrap) to open and fetch data using the ID (the hyperlink value) and populate with data on the body in modal from SQL. I have tried different approaches but none is working well. The modal opens up but its not prominent as if its opening in background. Please help me with this. Used Links in HEAD: <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min

2021-10-24 00:24:17    分类:问答    php   ajax   twitter-bootstrap   modal-dialog   bootstrap-modal

引导模式没有正确弹出(bootstrap modal not properly popped out)

问题 我正在尝试在 ruby​​ on rails 上显示一个模态。 我设置了一个视图按钮,所以只要点击它,模态就会弹出。 但它没有正常工作。 正如您在图像上看到的,模态不应该变暗。 因此,我无法点击任何内容。 这是我的代码: index.html.erb <tbody> <% @quotations.each do |quotation| %> <tr> <td><%= quotation.customer.name %></td> <td><%= quotation.build_quotation_number %></td> <td><%= quotation.reference_no %></td> <td align="center"><%= quotation.customer.tin %> . </td> <td align="center"> <% if current_administrator.admin? || quotation.created_by_id == current_administrator.id %> <%= link_to ('<i class="ti-pencil-alt"> </i>').html_safe, edit_quotation_path(quotation), class: "btn btn-icon btn-fill

2021-10-23 19:01:57    分类:技术分享    css   ruby-on-rails   bootstrap-4   bootstrap-modal

bootstrap 使用什么使背景变得被动(what does bootstrap use to make backdrop passive)

问题 我正在尝试仅使用 CSS 和 jQuery 创建一个类似 Bootstrap 的模式,而不使用 Bootstrap。 但是在启动模态后,背景仍然处于活动状态。 我该怎么做才能使它被动,以便在滚动时只有模态内容滚动,如果在模态窗口外单击,它会关闭? 请分享您的建议。 下面是我的代码片段。 $(document).ready(function() { $(".modal").hide(); let flag = 0;//hidden $("#launch-button").click(function(){ $(".modal").slideDown(200, function() { $(".bg-body").click(function(){ $(".modal").slideUp(200); flag = 0;//hidden $(".bg-body").css("opacity","initial"); }); }); flag = 1;//visible $(".bg-body").css("opacity","0.3"); }); $("#save-btn").addClass("close-button") $(".close-button").click(function(){ $(".modal").slideUp(200); flag = 0;/

2021-10-23 18:44:43    分类:技术分享    jquery   modal-dialog   bootstrap-modal

即使验证触发,模态内的按钮也会加载页面(button inside modal loads the page even if validations fire)

问题 我有一个表单,里面有一个 button1 触发模态。 在模态窗口内,我有带有验证的文本框(以获取一些凭据)和另一个包含 onClick 定义的按钮(button2)(type=button),如果我提供良好的数据,它就可以正常工作,但是当我在其中一个文本框中没有提供数据时然后单击按钮 2 重新加载完整页面,然后进入主页,单击按钮 1 并看到验证消息。 验证应该在用户单击 button2 时出现 我环顾四周并尝试了几件事,但无法弄清楚为什么会发生这种情况,我在 page_load 中使用页面路由是这个原因吗? 这是我的 html.aspx 模态内的代码: <form=from1 runat=server> <div class="modal fade" id="logger_modal" tabindex="-1" role="dialog" aria-labelledby="logger_model1" aria-hidden="true"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label=

2021-10-23 17:08:15    分类:技术分享    asp.net   validation   bootstrap-modal   pageload

情节图未能在模态内自动缩放(Plotly plot failed to automatically scale inside a modal)

问题 我有 Plotly.js 和引导程序的问题。 在模态中插入图形时,即使图宽度设置为 100%,并且图布局选项 autosize 设置为 true,图也不会自动缩放到模态宽度。 打开模态时,绘图宽度为 100像素(而不是 100%),我必须以编程方式(或手动)单击“自动缩放”模式栏按钮以正确显示绘图。 您可以使用此代码笔查看此操作: https://codepen.io/anon/pen/PaGOWv?editors=1010 <div class="modal-body"> <div id="myDiv" style="width: 100%;"></div> </div> <!-- with plotly option: var layout = {autosize: true}; --> 如果有人知道如何在渲染后无需重新缩放即可全角显示绘图,我会非常高兴。 谢谢! 阿诺 PS:也贴在github上 回答1 问题发生是因为在模式打开之前加载绘图。 您可以在加载工作正常的模式时生成绘图或更新绘图布局。 $('#myModal').on('shown.bs.modal', function (e) { Plotly.newPlot('myDiv', data, layout); }) 或者 $('#myModal').on('shown.bs.modal', function

2021-10-23 08:52:33    分类:技术分享    jquery   twitter-bootstrap-3   bootstrap-modal   plotly.js

button inside modal loads the page even if validations fire

I have a form inside which I have a button1 which triggers the modal. Inside modal window I have textboxes(to take some credentials) with validations and another button (button2) (type=button) containing onClick definition which is working fine if I provide good data, but when I provide no data in one of the text boxes and click on the button2 the complete page reloads and I get to my main page where I click on button1 and I see the validation messages. The validation should appear just as the user clicks button2 I have looked around and tried couple of thing but cant figure out why is it

2021-10-23 04:25:18    分类:问答    asp.net   validation   bootstrap-modal   pageload

使用 django 将值传递给引导模式表单(pass value to bootstrap modal form with django)

问题 当我为我的表单使用引导模式时,它只显示第一个值。 这里是我的template.html {% for company in companys %} <tr> <td>{{ company.name }}</td> <td>{{ company.desc }}</td> <td align="center"> <button type="button" class="btn btn-warning margin-bottom" data-toggle="modal" data-target="#modal-default2"> delete </button> <div class="modal fade" id="modal-default2"> <div class="modal-dialog"> <form method="post" action="{% url 'system:company_delete' pk=company.pk %}"> {% csrf_token %} <div class="modal-content"> <div class="modal-body"> <input type="text" name="name" maxlength="100" required="" id="id_name" value="{{ company.pk }

2021-10-22 22:53:41    分类:技术分享    javascript   django   django-forms   django-templates   bootstrap-modal

Internet Explorer 中的开闭模式问题(Open-Close Modal issue in Internet Explorer)

问题 我有一个带关闭按钮的模式窗口(使用引导程序)。 模态窗口在大多数浏览器中都可以正常打开和关闭。 但是,在 Internet Explorer 中,存在一个问题。 我们可以很好地打开模态窗口,然后很好地关闭它……但是如果我们再次尝试打开它,它就不会了。 大多数 javascript 功能都在引导程序中。 下面是打开按钮的 html [我相信 data-toggle="modal" 和 data-target="#exampleModal" 是打开窗口的关键]... <a href="javascript:void(0)" id="navdemo" data-toggle="modal" data-target="#exampleModal">Get The Demo</a> ...以及模式窗口开始的 html,带有关闭按钮 [注意 id="exampleModal" 告诉要打开哪个窗口。 数据关闭告诉关闭“模态”...... <div class="modal fade show" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" style="padding-right: 17px; display: block;"> <div class="modal

2021-10-22 17:02:51    分类:技术分享    popup   bootstrap-modal

How can I pass data to Modal using react. Edit or Delete?

I want to pass the data to the modal when the button edit is clicked like the id, email, and password. Just started with react. I'm using API here. How can I do that seems it very different when I'm using laravel or other pl's. Hope for some help and advice on how to do it. Here's the code, the this.state contains the fields from my API Toggle Modal and the fetch API to be returned using react-table import React from 'react'; import namor from "namor"; import ReactTable from 'react-table'; import { Link } from 'react-router-dom'; import { Panel, PanelHeader } from './../../components/panel

2021-10-22 11:30:50    分类:问答    reactjs   modal-dialog   bootstrap-modal   react-table