将js压缩盒转换为lightbox

Question

我有一个confirm() JS代码，它运行得很好。基本上，它是一个小函数，根据我发送的值(1或2)显示一条文本消息，按“确定”按钮会将它们带到一个pdf文件中。但是，当我在firefox中使用它时，它会显示“阻止此页面显示其他内容”对话框，并且无法格式化其中的文本。

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

    <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弹出窗口中删除该复选框。

如果您正在寻找一个更现代的解决方案，完全控制消息显示，您应该使用模态对话框。看起来好多了。因为它是您自己的HTML，所以您可以使用CSS对其进行任何样式化。

如果您想加快速度，有许多可用的库。作为一个例子，看看这个库如何用可定制的modals：https://limonte.github.io/sweetalert2/替换默认的javascript弹出框。

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>

​