将 js comfirm box 转换为 lightbox

Question

我有一个 confirm() JS 代码，它工作得很好。基本上它是一个小功能，根据我发送的值（1 或 2）显示文本消息，按下确定按钮会将它们带到 pdf 文件。但是，当我在 firefox 中使用它时，它会显示 "Prevent this page from showing additional content" 对话框并且我无法格式化其中的文本。

我正在寻找有关如何使用 lightbox/modal 转换它的指导。我的代码：

    <script language="javascript">
function confdl(distext,fname) 
{
    if (distext == "1")
    {
    var answer = confirm("Message 1 goes here.")
    }
    else
    {
    var answer = confirm("Message 2 goes here.")        
    }
    if (answer){
        window.location = ("/path/to/pdf/file/"+fname);
    }
    else{

    }
}
</script>

<a  href="javascript:confdl('1','file1.pdf');">PDF 1</a>
<a  href="javascript:confdl('2','file2.pdf');">PDF 2</a>

Answer 1

使用confirm没有任何问题，但是，当在google Chrome中显示不止一次时，它会显示一个复选框，让用户阻止弹出警报.这是 chrome 的一项功能，可防止烦人甚至恶意网站出现不需要的弹出窗口。

在您的方案中使用确认应该没问题，但您将无法从 chrome 弹出窗口中删除该复选框。

如果您正在寻找更现代的解决方案，完全控制消息显示，您应该使用模态对话框。它看起来好多了。由于是您自己的 HTML，您可以使用 CSS.

随意设置样式

如果您想加快速度，可以使用许多库。例如，看看这个库如何用可自定义的模式替换默认的 javascript 弹出框：https://limonte.github.io/sweetalert2/

Answer 2

我想我明白了:)

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://cdn.jquerytools.org/1.2.6/full/jquery.tools.min.js"></script>

     <script language="javascript" type="text/javascript">
         var linkno;

         function setLink(ind,msgtype) {
             linkno = ind;
    var div = document.getElementById('modalMsg');
    if (msgtype == "1")
     {
     div.innerHTML = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam sed lectus viverra, posuere mauris vel, faucibus massa. Fusce dui elit, ultricies quis aliquam et, pulvinar dictum ipsum. Etiam molestie arcu nec ipsum condimentum dignissim. Suspendisse et tempor orci, id accumsan mi. Pellentesque pellentesque ante vitae tortor vestibulum fringilla. Duis aliquam vel elit at molestie. Etiam vehicula libero id quam facilisis dictum. Pellentesque ultrices justo at feugiat luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent at dolor risus. Suspendisse sollicitudin vel purus ut ultrices. Cras libero est, lacinia et convallis vel, scelerisque quis lacus. Etiam condimentum orci sed urna finibus aliquet.';
    }
    else
    {
     div.innerHTML = 'Aliquam ut magna id est ornare imperdiet pellentesque tempus nisl. Fusce congue, turpis eu consequat pulvinar, massa tortor laoreet elit, nec dignissim felis neque non mauris. Aliquam non aliquet orci. Vivamus blandit at leo quis fringilla. Praesent sed est aliquet, porttitor nulla nec, finibus leo. Duis pellentesque id elit et porta. Nunc ullamcorper eget odio vitae accumsan. Quisque fermentum urna et nisl aliquet venenatis. Curabitur nec dignissim turpis. Nam dapibus tincidunt tincidunt. Ut vulputate ornare dictum. Donec ligula lectus, vestibulum at tellus ut, laoreet sagittis nunc. Sed malesuada aliquam lacus, eu suscipit justo dignissim luctus. Nullam eget mattis dolor. Ut ut ornare sem. ';
     
    }
   }
         // modal box related functions
         $(document).ready(function() {
             var triggers = $(".modalInput").overlay({

                 // some mask tweaks suitable for modal dialogs
                 mask: {
                     color: '#ebecff',
                     loadSpeed: 200,
                     opacity: 0.9
                 },

                 closeOnClick: false
             });

             $("#btnContinue").click(function(e) {
                 // close the overlay
                 window.location = triggers.eq(linkno).overlay().getTrigger().attr("href");
             });

         });

    .modal {
        background-color:#e9e9e9;
        display:none;
        width:550px;
        padding:15px;
        text-align:left;
        border:1px solid #999999;
        opacity:0.8;
        -moz-border-radius:6px;
        -webkit-border-radius:6px;
        -moz-box-shadow: 0 0 50px #ccc;
        -webkit-box-shadow: 0 0 50px #ccc;
        margin:auto auto auto auto;
    }

    .modal #modalTitle {
        margin:20px 0 0 0;
        padding:10px 0 10px 0;
        font-family:Arial;
        font-weight:bold;
        font-size:14px;
    }
    
    .modal #modalMsg 
    {
        border:1px solid #CCCCCC;
        background-color:#FFFFFF;
        color:#333333;
        padding:10px 10px 10px 10px;
    }
 .buttonlinks a
 {
  padding:4px;
  margin:4px;
  background:#f3f3f3;
  border:1px solid #cecece;
 }

    <div id="extlink" class="modal" style="display: none;">
        <a class="close" style="cursor:pointer;float: right; margin: 5px 0pt 0pt;" class="close">Close</a>
        <div id="modalTitle">Disclaimer:</div>
    
        <div id="modalMsg"></div>
    
        <!-- yes/no buttons -->
        <div style="float: right; margin: 20px 0pt 0pt;">
            <a id="btnContinue">Continue</a>
            <a class="close">Close</a>
        </div>
    </div>
 <div class="buttonlinks">    
     <a href="http://www.pic.cx/img97/ijtasctqvznzrgoidrxr.jpg" class='modalInput' rel='#extlink' onclick='setLink(0,1)' target="_blank">Site 1</a>
     <a href="http://www.w3schools.com/images/colorpicker.png" class='modalInput' rel='#extlink' onclick='setLink(0,2)' target="_blank">Site 2</a>
 </div>

将 js comfirm box 转换为 lightbox

converting js comfirm box to lightbox

javascript

lightbox

confirm